/* =========================================================================
   HOME — cenas exclusivas da página inicial
   Carregada só aqui: as páginas de especialidade têm o seu próprio arquivo.
   ========================================================================= */

/* =========================================================================
   HERO — PELE → LUZ → PRESENÇA → ESPECIALIDADES

   Toda a paleta abaixo foi AMOSTRADA da própria fotografia: o fundo
   mauve do estúdio é rgb(173,138,134) e a pele dela é rgb(151,110,95).
   É por isso que a fotografia não parece colada sobre um fundo — o
   fundo é a continuação dela por CSS.

   Nenhum efeito procedural. A dermatologia aqui está na fotografia.
   ========================================================================= */
.hero-cena {
  position: relative;
  height: 168vh;                 /* 100svh de cena + o curso da saída */
  --hc-mauve:     #AD8A86;
  --hc-mauve-esc: #7C635D;
  --hc-mauve-cl:  #CDB6A9;
  --hc-blush:     #E8D1C9;
  --hc-areia:     #D8B8AD;
  --hc-cacau:     #3A2E29;
  --hc-ivory:     #F5F0E9;
  /* estados vivos, escritos pelo scroll e pelo hover das especialidades */
  --hc-saida: 0;                 /* 0 = hero cheio, 1 = hero recuado */
  --hc-fios-op: 0;               /* fios no hover da tricologia */
  --hc-luz-extra: 0;             /* luz a mais no hover da estética */
}

.hc-pino {
  position: sticky; top: 0;
  height: 100svh; min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}

/* --------------------------------------------------------------- ambiente
   O campo tonal contínuo. É a cor do estúdio da foto, estendida. */
.hc-pino::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(88% 110% at 76% 36%, #C9A89D 0%, #A2867C 44%, #6E574F 100%),
    linear-gradient(102deg, #55433C 0%, #7C635D 44%, #A2867C 100%);
}

/* A costura com o próximo capítulo. O hero é escuro e a seção seguinte é
   ivory: sem isto, a borda entre os dois é uma linha reta. Esta faixa só
   acende no fim do curso de saída — quando o conteúdo do hero já se
   apagou — então nunca disputa espaço com a faixa de especialidades. */
.hc-pino::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 46%;
  z-index: 8; pointer-events: none;
  background: linear-gradient(180deg, rgba(247,244,239,0) 0%, var(--mineral) 82%);
  opacity: calc(max(0, var(--hc-saida) - .55) * 2.3);
}

/* ------------------------------------------------------------------ a luz
   Sem feixe, sem faixa, sem flare: uma massa difusa de
   champagne e blush que atravessa devagar e nunca vai embora de todo. */
.hc-luz {
  position: absolute; inset: -24% -34%; z-index: 4; pointer-events: none;
  background: radial-gradient(34% 118% at 50% 50%,
    rgba(255, 248, 238, .58) 0%,
    rgba(247, 226, 206, .34) 34%,
    rgba(232, 209, 201, .12) 58%,
    rgba(232, 209, 201, 0) 76%);
  filter: blur(30px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-46%, 0, 0) rotate(-8deg);
}
/* O brilho de sustentação: a atmosfera que fica sobre o rosto depois
   que a varredura passa. */
.hc-brilho {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(52% 62% at 72% 28%,
    rgba(255, 247, 234, calc(.20 + var(--hc-luz-extra) * .20)) 0%,
    rgba(240, 214, 196, calc(.10 + var(--hc-luz-extra) * .12)) 42%,
    rgba(240, 214, 196, 0) 74%);
  transition: opacity .9s var(--curva), background .9s var(--curva);
}

/* --------------------------------------------------- fios (hover tricologia) */
.hc-fios {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  pointer-events: none; opacity: var(--hc-fios-op);
  transition: opacity .85s var(--curva);
}
.hc-fios path {
  fill: none; stroke: rgba(245, 240, 233, .5); stroke-width: 1.1;
}

/* --------------------------------------------------------- a fotografia
   Coluna inteira, sangrando pela direita — não é um retrato dentro de uma
   moldurinha no meio da tela. A borda esquerda derrete no campo tonal,
   então ela pertence ao ambiente em vez de flutuar nele.

   40vw, e não 47vw: a coluna precisa ter proporção parecida com a da
   fotografia (780×1216 ≈ 0,64). Larga demais, o `cover` compensa cortando
   na vertical e come o queixo — a médica virava um olho na tela.

   O `transform-origin` é o ponto por onde a revelação começa: 70%/66% cai
   na bochecha dela. Ampliada 3,2x, essa região cobre a tela e não tem
   traço reconhecível — é a abertura "quase abstrata", e é a MESMA
   fotografia, não outra. */
.hc-retrato {
  position: absolute; z-index: 3; top: 0; bottom: 0; right: 0;
  width: clamp(380px, 40vw, 600px);
  transform-origin: 70% 66%;
  opacity: 0;
}
/* As duas máscaras ficam em elementos diferentes de propósito: uma por
   elemento dispensa `mask-composite`, cujo valor legado do -webkit- não
   é o mesmo do padrão. Se compositássemos, o fallback seria união — a
   borda deixaria de derreter e a foto viraria um bloco recortado. */
.hc-retrato picture, .hc-retrato img { display: block; width: 100%; height: 100%; }
.hc-retrato {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 12%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 12%, #000 38%);
}
.hc-retrato img {
  object-fit: cover; object-position: 52% 42%;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 11%);
  mask-image: linear-gradient(0deg, transparent 0%, #000 11%);
}

/* ------------------------------------------------------- leitura do texto
   O véu que garante contraste do lado do texto. Sem ele a tipografia
   ivory sobre o mauve dá 2.8:1 — bonito e ilegível.

   Ele ENTRA junto com a tipografia, e não antes: nas cenas 01 e 02 não há
   texto para proteger, e mantê-lo aceso desde o início era o que
   transformava a abertura num campo marrom apagado em vez de luz. */
.hc-campo {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
  background:
    linear-gradient(96deg, rgba(40, 31, 28, .82) 0%, rgba(48, 38, 34, .58) 30%, rgba(58, 46, 41, .16) 56%, rgba(58, 46, 41, 0) 74%),
    linear-gradient(0deg, rgba(34, 27, 24, .74) 0%, rgba(36, 29, 26, .42) 15%, rgba(38, 30, 27, .10) 30%, rgba(38, 30, 27, 0) 48%);
}

/* --------------------------------------------------------------- conteúdo */
.hc-conteudo {
  position: absolute; z-index: 7; left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  max-width: 1340px; margin: 0 auto; padding: 0 var(--gutter);
  /* a saída do scroll apaga o bloco inteiro */
  opacity: calc(1 - var(--hc-saida));
}
/* A coluna de texto nunca entra na faixa da fotografia. Sem isto o h1
   é um bloco da largura da tela e as quebras dependem de sorte. */
.hc-conteudo > * { max-width: min(46%, 620px); }
.hc-olho {
  display: flex; align-items: center; gap: 13px;
  font-size: .69rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(245, 240, 233, .82); margin: 0 0 clamp(20px, 2.6vh, 30px);
  opacity: 0; transform: translateY(12px);
}
.hc-olho .fio { background: var(--hc-areia); width: 30px; }

.hc-titulo {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.7rem, 6.1vw, 5.5rem);
  line-height: .99; letter-spacing: -.026em;
  color: var(--hc-ivory);
  margin: 0;
}
.hc-linha { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hc-linha > span {
  display: block; transform: translateY(112%);
  will-change: transform;
}
.hc-realce { font-style: italic; color: var(--hc-areia); }

.hc-sub {
  margin: clamp(22px, 3vh, 34px) 0 0;
  max-width: 42ch;
  font-size: clamp(.95rem, 1.15vw, 1.09rem); line-height: 1.72; font-weight: 300;
  color: rgba(245, 240, 233, .80);
  opacity: 0; transform: translateY(14px);
}

.hc-acoes {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(30px, 4vh, 46px);
  opacity: 0; transform: translateY(14px);
}
.hc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1.06rem 2.05rem;
  font-family: var(--sans); font-size: .73rem; font-weight: 400;
  letter-spacing: .17em; text-transform: uppercase; white-space: nowrap;
  transition: transform .45s var(--curva), background .45s var(--curva),
              border-color .45s var(--curva), color .45s var(--curva);
}
.hc-btn-cheio { background: var(--hc-areia); color: var(--hc-cacau); }
.hc-btn-cheio:hover { background: var(--hc-blush); transform: translateY(-3px); }
.hc-btn-linha { border: 1px solid rgba(245, 240, 233, .38); color: var(--hc-ivory); }
.hc-btn-linha:hover { border-color: var(--hc-areia); transform: translateY(-3px); }
.hc-btn .seta { transition: transform .45s var(--curva); }
.hc-btn:hover .seta { transform: translateX(5px); }

/* ---------------------------------------------------- as três, no rodapé
   Faixa editorial, não três cartões. Cada uma é a porta da sua página. */
.hc-esp {
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 0;
  max-width: 1340px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  opacity: calc(1 - var(--hc-saida) * 1.25);
}
.hc-esp a {
  position: relative;
  display: block; padding: clamp(18px, 2.4vh, 26px) clamp(14px, 2vw, 30px) clamp(22px, 3vh, 32px) 0;
  opacity: 0; transform: translateY(14px);
}
/* o fio que se acende no hover, saindo da esquerda */
.hc-esp a::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 100%; height: 1px;
  background: var(--hc-areia); transition: right .6s var(--curva);
}
.hc-esp a:hover::before, .hc-esp a:focus-visible::before { right: 0; }
.hc-esp strong {
  display: block; font-weight: 400;
  font-size: clamp(.78rem, .95vw, .88rem); letter-spacing: .13em; text-transform: uppercase;
  color: var(--hc-ivory); transition: color .45s var(--curva);
}
/* .74 e não .62: esta linha cai sobre a fotografia, e a .62 dava 4.4:1.
   O texto miúdo e apagado é o vício clássico deste tipo de faixa. */
.hc-esp em {
  display: block; font-style: normal; margin-top: 8px;
  font-size: .7rem; letter-spacing: .11em;
  color: rgba(245, 240, 233, .78);
}
.hc-esp a:hover strong { color: var(--hc-areia); }

/* =========================================================================
   A SEQUÊNCIA — 0s a 7s, uma coisa de cada vez.
   Só transform, opacity e filter: tudo na GPU, zero JS por quadro.
   Dispara com .hc-toca no body — posto pelo JS quando a cortina sai E a
   aba está visível, para a sequência não se perder em segundo plano.
   ========================================================================= */
@keyframes hc-luz-varre {
  0%   { opacity: 0;   transform: translate3d(-46%, 0, 0) rotate(-8deg); }
  26%  { opacity: .92; }
  64%  { opacity: .70; }
  100% { opacity: .46; transform: translate3d(24%, 0, 0) rotate(-8deg); }
}
@keyframes hc-brilho-fica { to { opacity: 1; } }
@keyframes hc-veu-entra  { to { opacity: 1; } }
/* A REVELAÇÃO — uma fotografia só, do primeiro ao último quadro.
   Nada aparece por cima e nada é substituído: o que muda é a distância e
   o foco. A curva é deliberadamente desigual — o afastamento acontece
   quase todo na primeira metade e o foco resolve na segunda, então a
   imagem "abre" antes de ficar nítida, como uma lente encontrando o
   plano. Se as duas coisas andassem juntas, viraria um zoom-out comum.

     0–20%   muito fechada, fora de foco, quase abstrata
     20–50%  a câmera recua
     40–85%  o foco entra
     85–100% assenta no enquadramento final */
@keyframes hc-retrato-revela {
  0%   { opacity: 0; filter: blur(30px) saturate(.78); transform: scale(3.2); }
  14%  { opacity: 1; filter: blur(30px) saturate(.78); transform: scale(3.0); }
  32%  {             filter: blur(24px) saturate(.82); transform: scale(2.25); }
  52%  {             filter: blur(14px) saturate(.88); transform: scale(1.62); }
  72%  {             filter: blur(6px)  saturate(.94); transform: scale(1.25); }
  88%  {             filter: blur(1.6px) saturate(.98); transform: scale(1.06); }
  100% { opacity: 1; filter: blur(0px)  saturate(1);   transform: scale(1); }
}
@keyframes hc-sobe      { to { opacity: 1; transform: none; } }
@keyframes hc-linha-sobe { to { transform: none; } }

/* As nove cenas, uma de cada vez. Nada entra junto de propósito: é a
   separação entre as batidas que faz a entrada parecer cinema em vez de
   "tudo aparecendo com delay". */
/* A fotografia se revela primeiro, sozinha. Só quando ela chega ao
   enquadramento final é que a tipografia começa a entrar — e aí sim uma
   coisa de cada vez: localização → headline → subtítulo → CTAs →
   especialidades. */
.hc-toca .hc-retrato { animation: hc-retrato-revela 5.2s cubic-bezier(.28,.66,.24,1) both; }
.hc-toca .hc-luz     { animation: hc-luz-varre 4s var(--lento) .9s both; }
.hc-toca .hc-brilho  { animation: hc-brilho-fica 2s var(--curva) 3.6s both; }
.hc-toca .hc-campo   { animation: hc-veu-entra 2.2s var(--curva) 4.3s both; }

.hc-toca .hc-olho                { animation: hc-sobe 1.3s var(--lento) 5.0s both; }
.hc-toca .hc-linha:nth-child(1) > span { animation: hc-linha-sobe 1.35s var(--lento) 5.3s both; }
.hc-toca .hc-linha:nth-child(2) > span { animation: hc-linha-sobe 1.35s var(--lento) 5.55s both; }
.hc-toca .hc-linha:nth-child(3) > span { animation: hc-linha-sobe 1.35s var(--lento) 5.8s both; }
.hc-toca .hc-sub                 { animation: hc-sobe 1.3s var(--lento) 6.5s both; }
.hc-toca .hc-acoes               { animation: hc-sobe 1.3s var(--lento) 7.0s both; }
.hc-toca .hc-esp a:nth-child(1)  { animation: hc-sobe 1.2s var(--lento) 7.5s both; }
.hc-toca .hc-esp a:nth-child(2)  { animation: hc-sobe 1.2s var(--lento) 7.7s both; }
.hc-toca .hc-esp a:nth-child(3)  { animation: hc-sobe 1.2s var(--lento) 7.9s both; }

/* Fim da sequência: o JS assume. As animações saem do caminho para que
   scroll e hover possam escrever nas mesmas propriedades. */
.hc-pino.assentada .hc-campo,

.hc-pino.assentada .hc-luz,
.hc-pino.assentada .hc-brilho,
.hc-pino.assentada .hc-retrato,
.hc-pino.assentada .hc-olho,
.hc-pino.assentada .hc-linha > span,
.hc-pino.assentada .hc-sub,
.hc-pino.assentada .hc-acoes,
.hc-pino.assentada .hc-esp a { animation: none; }

.hc-pino.assentada .hc-olho,
.hc-pino.assentada .hc-sub,
.hc-pino.assentada .hc-acoes,
.hc-pino.assentada .hc-esp a { opacity: 1; transform: none; }
.hc-pino.assentada .hc-linha > span { transform: none; }
.hc-pino.assentada .hc-brilho, .hc-pino.assentada .hc-campo { opacity: 1; }
.hc-pino.assentada .hc-luz { opacity: calc(.46 * (1 - var(--hc-saida))); transform: translate3d(24%, 0, 0) rotate(-8deg); }


/* A saída do scroll: a fotografia recua, a luz some, o próximo capítulo
   entra. O hero não pisca — ele se afasta. */
.hc-pino.assentada .hc-retrato {
  transform: scale(calc(1 - var(--hc-saida) * .045)) translateY(calc(var(--hc-saida) * -1.6vh));
  opacity: calc(1 - var(--hc-saida) * .55);
  transition: none;
}

/* ---------------------------------------------------------------- 1180px */
@media (max-width: 1180px) {
  /* 46vw e 43%: com 52vw de foto a coluna de texto encostava a 12px da
     fotografia. Aqui a folga volta para ~60px. */
  .hc-retrato { width: clamp(320px, 42vw, 520px); }
  .hc-conteudo > * { max-width: 45%; }
  .hc-titulo { font-size: clamp(2.5rem, 6.2vw, 4.2rem); }
  .hc-sub { max-width: 34ch; }
}

/* ----------------------------------------------------------------- 900px
   Aqui a composição vira outra: a fotografia deixa de dividir a tela
   com o texto e passa a ser o teto da cena. Não é o desktop encolhido. */
@media (max-width: 900px) {
  .hero-cena { height: auto; }
  .hc-pino {
    position: relative; height: auto; min-height: 0;
    display: flex; flex-direction: column;
    padding-bottom: clamp(28px, 5vh, 44px);
  }
  /* A altura acompanha a LARGURA, não só a viewport: numa faixa de
     largura inteira o `cover` corta na vertical, e quanto mais larga a
     tela, mais fundo ele corta. Sem o vw aqui, o tablet ficava com 58%
     da fotografia fora e sobrava um olho. */
  .hc-retrato {
    position: relative; inset: auto; width: 100%;
    height: clamp(430px, 78vw, 620px); flex: none;
    margin-top: 0;
  }
  /* A faixa é muito mais larga que alta, então o `cover` corta na
     vertical: sem esta altura e este eixo, sobrava a testa e o olho, e o
     sorriso — que é o acolhimento — ficava fora da tela. */
  .hc-retrato img {
    object-position: 55% 58%;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 17%);
    mask-image: linear-gradient(0deg, transparent 0%, #000 17%);
  }
  .hc-luz { inset: -18% -30% auto; height: 78svh; }
  .hc-brilho { inset: 0 0 auto; height: 60svh; }
  .hc-campo {
    background:
      linear-gradient(0deg, rgba(40, 31, 28, .94) 0%, rgba(44, 35, 31, .86) 38%, rgba(58, 46, 41, .30) 62%, rgba(58, 46, 41, 0) 88%);
  }
  /* `.hc-pino` vira flex-column aqui, e nele o `margin: 0 auto` herdado
     do desktop encolhe os filhos até o conteúdo em vez de esticá-los.
     Por isso a largura é reafirmada — e o teto de coluna do desktop,
     que só existe para desviar da fotografia, é removido. */
  .hc-conteudo, .hc-esp { width: 100%; align-self: stretch; }
  .hc-conteudo > * { max-width: none; }
  .hc-conteudo {
    position: relative; top: auto; transform: none;
    margin: clamp(-72px, -7vh, -48px) 0 0;
    padding-bottom: clamp(26px, 4vh, 40px);
  }
  .hc-titulo { font-size: clamp(2.35rem, 8.4vw, 3.4rem); }
  .hc-sub { max-width: 40ch; font-size: .98rem; }
  .hc-esp {
    position: relative; bottom: auto;
    grid-template-columns: 1fr; margin: clamp(24px, 4vh, 38px) 0 0;
  }
  .hc-esp a { padding: 16px 0 18px; }
  .hc-esp strong { display: inline-block; }
  .hc-esp em { margin-top: 6px; }
  /* sem pino não há saída por scroll: nada de opacidade controlada por var */
  .hc-conteudo, .hc-esp { opacity: 1; }
}

/* ----------------------------------------------------------------- 680px */
@media (max-width: 680px) {
  /* Faixa mais alta e eixo mais baixo: com 450px e eixo em 50% a janela
     visível ia até 86% da imagem e a boca dela ficava fora. Agora vai a
     90%, e o que a máscara de rodapé consome é o pescoço — não o rosto. */
  .hc-retrato { height: min(66svh, 560px); }
  .hc-retrato img {
    object-position: 55% 62%;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 10%);
    mask-image: linear-gradient(0deg, transparent 0%, #000 10%);
  }
  .hc-acoes { gap: 11px; }
  .hc-btn { flex: 1 1 100%; padding: 1rem 1.5rem; }
  .hc-titulo { font-size: clamp(2.2rem, 9.6vw, 3rem); }
  .hc-olho { font-size: .63rem; letter-spacing: .22em; }
}

/* No mobile a sequência é mais curta: a mesma narrativa, sem a espera. */
@media (max-width: 900px) {
  .hc-toca .hc-luz     { animation: hc-luz-varre 2.6s var(--lento) .6s both; }
  .hc-toca .hc-retrato { animation: hc-retrato-revela 3.6s cubic-bezier(.28,.66,.24,1) both; }
  /* a tipografia só começa depois que a fotografia assenta (3,6s) */
  .hc-toca .hc-brilho  { animation-delay: 2.6s; }
  .hc-toca .hc-campo   { animation-delay: 3.0s; }
  .hc-toca .hc-olho    { animation-delay: 3.5s; }
  .hc-toca .hc-linha:nth-child(1) > span { animation-delay: 3.75s; }
  .hc-toca .hc-linha:nth-child(2) > span { animation-delay: 3.9s; }
  .hc-toca .hc-linha:nth-child(3) > span { animation-delay: 4.05s; }
  .hc-toca .hc-sub    { animation-delay: 4.6s; }
  .hc-toca .hc-acoes  { animation-delay: 4.95s; }
  .hc-toca .hc-esp a:nth-child(1) { animation-delay: 5.3s; }
  .hc-toca .hc-esp a:nth-child(2) { animation-delay: 5.45s; }
  .hc-toca .hc-esp a:nth-child(3) { animation-delay: 5.6s; }
}
/* -------------------------------------------------- OS TRÊS CAPÍTULOS
   O fundo é fotografia de pele. A malha de células que havia aqui lia
   como couro de réptil, e isso não se resolve suavizando: o conceito
   estava errado, não o parâmetro.

   210vh, e não 380vh: a seção tinha 3.420px de curso e o visitante
   sentia o scroll travar. Agora são ~1.100px — três capítulos, tempo de
   ler cada um, e segue. */
.capitulos-esp {
  position: relative; height: 210vh;
  --ce-blush:  #E5C4B9;
  --ce-nude:   #D3ADA2;
  --ce-areia:  #C8B2A4;
  --ce-taupe:  #92796D;
  --ce-cacau:  #5A4941;
  --ce-ivory:  #F4EEE8;
}
.ce-pino {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center; isolation: isolate;
}
/* o campo tonal por baixo da fotografia: garante a cor mesmo antes de a
   imagem carregar, e é o que a pele tinge quando muda de estado */
.ce-pino::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(78% 92% at 68% 34%, var(--ce-blush) 0%, var(--ce-nude) 40%, var(--ce-taupe) 78%, var(--ce-cacau) 100%);
}

/* --- a pele ---------------------------------------------------------
   Uma matéria só. A clínica aproxima e define, a estética afasta e
   suaviza — o mesmo tecido, dois modos de olhar. */
.ce-pele { position: absolute; inset: 0; z-index: 1; }
.ce-pele picture, .ce-pele img { display: block; width: 100%; height: 100%; }
.ce-pele img {
  object-fit: cover; object-position: 50% 46%;
  transform: scale(var(--pele-s, 1.06));
  filter: blur(var(--pele-b, 2px)) saturate(var(--pele-sat, 1)) contrast(var(--pele-c, 1));
  opacity: .92;
  transition: transform 1.4s var(--curva), filter 1.2s var(--curva);
}
.ce-pino.em-clinica    { --pele-s: 1.16; --pele-b: 0px;   --pele-c: 1.09; --pele-sat: 1.02; }
.ce-pino.em-tricologia { --pele-s: 1.24; --pele-b: 1.2px; --pele-c: 1.04; --pele-sat: .97; }
.ce-pino.em-estetica   { --pele-s: 1.02; --pele-b: 5px;   --pele-c: .97;  --pele-sat: 1.06; }

/* --- a profundidade (tricologia) --------------------------------------
   Nenhum elemento capilar. Fio, folículo e haste desenhados lêem como
   gráfico colado sobre a fotografia em qualquer variação — a ideia está
   encerrada.

   O estado se distingue pelos mesmos quatro eixos que a seção já usa:
   distância, foco, luz e movimento. A tricologia é a única que se move,
   e é a que entra mais fundo na matéria: é a leitura de quem investiga
   a superfície de perto. */
.ce-profundidade {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0;
  /* o campo do dermatoscópio: nítido no miolo, dissolvendo nas bordas */
  background:
    radial-gradient(58% 62% at 66% 46%, rgba(90, 73, 65, 0) 0%, rgba(74, 58, 50, .22) 62%, rgba(52, 41, 35, .5) 100%);
  transition: opacity 1.2s var(--curva);
}
.ce-pino.em-tricologia .ce-profundidade { opacity: 1; }

/* a deriva: só a tricologia se move. Lentíssima, e é ela que traz a
   sensação de investigação — o olho percorrendo a superfície. */
@keyframes ce-deriva-pele {
  from { translate: 0 0; }
  to   { translate: -1.6% -1%; }
}
.ce-pino.em-tricologia .ce-pele img {
  animation: ce-deriva-pele 18s ease-in-out infinite alternate;
}

/* --- a luz (estética) ----------------------------------------------- */
.ce-luz {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background:
    radial-gradient(46% 54% at 64% 32%, rgba(255, 250, 243, .58) 0%, rgba(247, 229, 214, .26) 44%, rgba(247, 229, 214, 0) 74%);
  transition: opacity 1.2s var(--curva);
}
.ce-pino.em-estetica .ce-luz { opacity: 1; }

/* --- o véu de leitura ------------------------------------------------ */
.ce-veu {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(94deg, rgba(52, 41, 36, .88) 0%, rgba(58, 46, 40, .72) 34%, rgba(70, 56, 48, .34) 62%, rgba(70, 56, 48, .12) 100%),
    linear-gradient(0deg, rgba(46, 36, 31, .42) 0%, rgba(46, 36, 31, 0) 34%);
}

.ce-grade {
  position: relative; z-index: 5;
  width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 90px); align-items: center;
}
.ce-lista li + li { margin-top: 4px; }
.ce-lista button {
  display: flex; align-items: baseline; gap: 16px; width: 100%;
  padding: 12px 0; text-align: left;
  font-family: var(--serif); font-size: clamp(1.28rem, 2.5vw, 2rem);
  color: var(--ce-ivory); opacity: .5;
  border-bottom: 1px solid transparent;
  transition: opacity .5s var(--curva), padding-left .5s var(--curva), border-color .5s var(--curva);
}
.ce-lista button:hover { opacity: .78; }
.ce-lista button.ativo {
  opacity: 1; padding-left: 14px;
  border-bottom-color: rgba(229, 196, 185, .34);
}

.ce-painel { position: relative; isolation: isolate; }
.ce-conteudo { min-height: 232px; transition: opacity .45s var(--curva), transform .45s var(--curva); }
.ce-conteudo.trocando { opacity: 0; transform: translateY(10px); }
.ce-conteudo h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 18px;
  color: var(--ce-ivory);
}
.ce-conteudo p {
  color: rgba(244, 238, 232, .8); font-size: 1.02rem; line-height: 1.9; max-width: 44ch;
}
/* `.ce-conteudo p` é (0,1,1) e vencia `.ce-itens` (0,1,0): a linha de
   condições saía com 16px de corpo em vez do rótulo pequeno. */
.ce-conteudo p.ce-itens {
  margin-top: 22px; font-family: var(--sans);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.9; color: var(--ce-blush);
}
.ce-cta { margin-top: 34px; }
.capitulos-esp .ce-cta { background: var(--ce-blush); color: var(--ce-cacau); }
.capitulos-esp .ce-cta:hover { background: var(--ce-ivory); }

@media (max-width: 900px) {
  .capitulos-esp { height: 190vh; }
  .ce-conteudo { min-height: 200px; }
  .ce-conteudo p { font-size: .96rem; }
  .ce-veu {
    background:
      linear-gradient(0deg, rgba(48, 38, 33, .92) 0%, rgba(54, 43, 37, .78) 46%, rgba(70, 56, 48, .38) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capitulos-esp { height: auto !important; }
  .ce-pino { position: relative !important; height: auto !important; min-height: 92svh; padding: 60px 0; }
  .ce-pele img { transition: none !important; }
  .ce-pino.em-tricologia .ce-pele img { animation: none !important; }
}

/* ----------------------------------------------------------- A MÉDICA
   A entrada da fotografia é a única animação da seção: um foco muito
   curto resolvendo, com micro-escala. O texto vem alguns décimos depois,
   porque quem manda aqui é o rosto — e é ele que conduz o olho para a
   frase. Nada de máscara, nada de paralaxe forte: esta seção é humana,
   e o hero já gastou o orçamento de espetáculo da página. */
.medica-foto img {
  transform: scale(1.02);
  filter: blur(9px);
  transition: transform 1.5s var(--lento), filter 1.3s var(--lento);
}
.medica-foto.dentro img { transform: none; filter: blur(0); }
.medica .medica-texto [data-revela] { transition-delay: calc(var(--d, 0s) + .28s); }

@media (prefers-reduced-motion: reduce) {
  .medica-foto img { transform: none !important; filter: none !important; }
}

/* ---------------------------------------------------------- ABORDAGEM
   A CONSTELAÇÃO. Um núcleo e três especialidades ligadas a ele.

   Duas regras estruturais respondem pelo defeito antigo — legenda
   cortada, especialidade fora da área:

   1. cada legenda tem a largura amarrada à largura do PALCO (`min(%)`),
      então a soma "centro ± metade da largura" nunca alcança a borda,
      em nenhum viewport;
   2. as linhas são calculadas em JS a partir das caixas MEDIDAS das
      legendas, e não de coordenadas fixas. A linha para onde o texto
      começa, e não onde alguém supôs que ele começaria.

   A cor sai da mesma pele aprovada na seção anterior — as variáveis
   abaixo são as `--ce-*` de `.capitulos-esp`, para as duas seções serem
   a mesma matéria. */
.abordagem {
  padding: var(--secao) 0; text-align: center;
  --ab-blush: #E5C4B9;
  --ab-nude:  #D3ADA2;
  --ab-areia: #C8B2A4;
  --ab-taupe: #92796D;
  --ab-cacau: #5A4941;
}
.ab-titulo { font-size: clamp(1.95rem, 4.6vw, 3.7rem); line-height: 1.08; letter-spacing: -0.018em; max-width: 20ch; margin: 0 auto; }
.ab-lead { margin: 30px auto 0; max-width: 54ch; color: var(--tinta-2); font-size: 1.01rem; line-height: 1.9; }

/* --- o palco ----------------------------------------------------------
   A proporção é travada para o desenho ter sempre o mesmo equilíbrio.
   Tudo dentro é posicionado em % dela, então a composição escala inteira
   em vez de se recompor a cada largura. */
.ab-palco {
  position: relative;
  width: min(1060px, 100%);
  margin: clamp(34px, 5vw, 74px) auto 0;
  aspect-ratio: 1060 / 780;
  perspective: 1500px;
  transform-style: preserve-3d;
  text-align: left;
}

/* o campo tonal: a pele por trás de tudo, muito diluída. Sem ele o
   desenho flutua no ivory e a seção perde a matéria da anterior. */
.ab-campo {
  position: absolute; inset: -6% -4%;
  border-radius: 50%;
  background:
    radial-gradient(52% 48% at 50% 44%, rgba(229, 196, 185, .30) 0%, rgba(211, 173, 162, .18) 38%, rgba(200, 178, 164, .07) 66%, rgba(200, 178, 164, 0) 100%);
  filter: blur(24px);
  opacity: 0; transition: opacity 1.1s var(--curva);
}
.ab-palco.viva .ab-campo { opacity: 1; }

/* --- as linhas --------------------------------------------------------
   `ab-linha` é o traço permanente; `ab-pulso` é o deslocamento de luz
   que sai do núcleo e caminha até a legenda. O pulso só existe enquanto
   a seção está no ar. */
.ab-teia {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.ab-linha {
  fill: none; stroke: rgba(146, 121, 109, .42); stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: var(--L); stroke-dashoffset: var(--L);
  transition: stroke-dashoffset 1s var(--curva) var(--d), stroke .6s var(--curva), stroke-width .6s var(--curva);
}
.ab-palco.viva .ab-linha { stroke-dashoffset: 0; }
.ab-ponta {
  fill: rgba(146, 121, 109, .55);
  opacity: 0;
  transition: opacity .6s var(--curva) var(--dg), fill .6s var(--curva), r .5s var(--curva);
}
.ab-palco.viva .ab-ponta { opacity: 1; }
.ab-pulso {
  fill: none; stroke: var(--ab-blush); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 6px var(--L); stroke-dashoffset: var(--L2);
  opacity: 0;
}
.ab-palco.viva.no-ar .ab-pulso {
  opacity: .85;
  animation: ab-pulso 9s cubic-bezier(.5, 0, .5, 1) infinite;
  animation-delay: var(--dp);
}
@keyframes ab-pulso { to { stroke-dashoffset: 0; } }

/* --- o núcleo ---------------------------------------------------------
   Não é um círculo: são planos em profundidades diferentes dentro de uma
   perspectiva. O halo fica atrás, a esfera no meio, as membranas à
   frente e a tipografia por último — é a distância entre eles que produz
   o volume quando o objeto se inclina. */
.ab-nucleo {
  position: absolute; left: 50%; top: 42%;
  width: min(25.5%, 262px); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 1s var(--curva);
  text-align: center;
}
.ab-halo {
  position: absolute; inset: -40%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 244, .92) 0%, rgba(240, 216, 205, .55) 44%, rgba(211, 173, 162, .20) 72%, rgba(211, 173, 162, 0) 100%);
  filter: blur(16px);
  transform: translateZ(-90px) scale(1.02);
  opacity: 0; transition: opacity 1.2s var(--curva) .1s, transform 1s var(--curva);
}
.ab-palco.viva .ab-halo { opacity: 1; }

/* a esfera. O gradiente é deslocado (34% 28%): é a luz vindo de cima e
   da esquerda, a mesma direção da fotografia da seção anterior. As duas
   sombras internas fazem o terminador e o reflexo de borda — sem elas
   isto seria um disco. */
.ab-esfera {
  position: absolute; inset: 0; border-radius: 50%;
  isolation: isolate; overflow: hidden;
  background:
    radial-gradient(64% 64% at 34% 28%,
      rgba(255, 253, 250, .97) 0%,
      rgba(246, 230, 222, .93) 30%,
      rgba(229, 196, 185, .84) 57%,
      rgba(191, 158, 145, .60) 80%,
      rgba(146, 121, 109, .32) 100%);
  box-shadow:
    inset -16px -20px 44px rgba(90, 73, 65, .22),
    inset 14px 16px 38px rgba(255, 252, 248, .72),
    0 26px 54px -26px rgba(90, 73, 65, .40);
  transform: translateZ(0);
  opacity: 0;
  transition: opacity .9s var(--curva) .12s, box-shadow .8s var(--curva), background .8s var(--curva);
}
.ab-palco.viva .ab-esfera { opacity: 1; }

/* a pele de verdade, por dentro. Máscara transparente no miolo: a
   textura fica na banda externa, onde lê como matéria, e o centro fica
   limpo para a tipografia. É o MESMO arquivo da seção anterior, então
   já está em cache quando chega aqui. */
.ab-pele {
  position: absolute; inset: 0; border-radius: 50%;
  background-size: cover; background-position: 50% 46%;
  mix-blend-mode: soft-light; opacity: .5;
  -webkit-mask-image: radial-gradient(closest-side, transparent 26%, rgba(0, 0, 0, .45) 52%, #000 84%);
          mask-image: radial-gradient(closest-side, transparent 26%, rgba(0, 0, 0, .45) 52%, #000 84%);
}
/* Os mesmos três recortes e os mesmos dois formatos do `<picture>` da
   seção anterior — e nos mesmos limites (680 / 1180). Tem de ser o
   arquivo IDÊNTICO ao que aquela seção já baixou: se aqui pedíssemos o
   WebP enquanto lá o navegador escolheu o AVIF, esta textura custaria um
   segundo download inteiro em vez de sair do cache.

   A declaração dupla é de propósito: onde `image-set()` não existe, a
   segunda linha é descartada e a primeira permanece. */
.ab-pele {
  background-image: url("/assets/images/doctor/skin/marina-pele-01-desktop.webp");
  background-image: image-set(
    url("/assets/images/doctor/skin/marina-pele-01-desktop.avif") type("image/avif"),
    url("/assets/images/doctor/skin/marina-pele-01-desktop.webp") type("image/webp"));
}
@media (max-width: 680px) {
  .ab-pele {
    background-image: url("/assets/images/doctor/skin/marina-pele-01-mobile.webp");
    background-image: image-set(
      url("/assets/images/doctor/skin/marina-pele-01-mobile.avif") type("image/avif"),
      url("/assets/images/doctor/skin/marina-pele-01-mobile.webp") type("image/webp"));
  }
}
@media (min-width: 681px) and (max-width: 1180px) {
  .ab-pele {
    background-image: url("/assets/images/doctor/skin/marina-pele-01-tablet.webp");
    background-image: image-set(
      url("/assets/images/doctor/skin/marina-pele-01-tablet.avif") type("image/avif"),
      url("/assets/images/doctor/skin/marina-pele-01-tablet.webp") type("image/webp"));
  }
}

/* o especular */
.ab-brilho {
  position: absolute; left: 16%; top: 12%; width: 34%; height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .28) 52%, rgba(255, 255, 255, 0) 100%);
  filter: blur(7px);
  transition: opacity .8s var(--curva);
}

/* as membranas: contornos orgânicos em profundidades diferentes. Ficam
   na banda externa — nenhuma cruza a área da tipografia. */
.ab-membrana { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-style: preserve-3d; }
.ab-anel {
  fill: none;
  stroke: rgba(126, 103, 57, calc(.16 + (1 - var(--t)) * .16));
  stroke-width: calc(.6px + (1 - var(--t)) * .5px);
  transform: translateZ(var(--z));
  transform-origin: 50% 50%; transform-box: view-box;
  opacity: 0;
  transition: opacity .8s var(--curva) var(--da), stroke .7s var(--curva);
}
.ab-palco.viva .ab-anel { opacity: 1; }
.ab-palco.viva.no-ar .ab-anel {
  animation: ab-respira calc(15s + var(--i) * 2s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -2.6s);
}
@keyframes ab-respira {
  0%, 100% { transform: translateZ(var(--z)) scale(1); }
  50%      { transform: translateZ(calc(var(--z) + 9px)) scale(1.028); }
}

/* --- a tipografia do núcleo ------------------------------------------
   Duas linhas, mesma família, hierarquia pela escala e pelo itálico.
   Vive no plano mais alto: sempre à frente das membranas. */
.ab-legenda {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; pointer-events: none;
  font-family: var(--serif); line-height: 1.14;
  transform: translateZ(86px);
  opacity: 0; transition: opacity .9s var(--curva) .55s;
}
.ab-palco.viva .ab-legenda { opacity: 1; }
.ab-legenda span {
  display: block; font-size: clamp(.82rem, 1.28vw, 1.02rem);
  letter-spacing: .04em; color: var(--tinta-2);
}
.ab-legenda em {
  display: block; font-style: italic;
  font-size: clamp(1.08rem, 1.72vw, 1.42rem);
  letter-spacing: .002em; color: var(--tinta);
  transition: color .6s var(--curva);
}

/* --- as três especialidades -------------------------------------------
   Clínica em cima à esquerda, tricologia em cima à direita, estética
   embaixo ao centro — a composição da referência.

   A largura é fração do PALCO, e é isso que impede o corte: a caixa da
   clínica vai de 5,25% a 30,75% e a da estética de 32% a 68%. Nenhuma
   chega perto de 0% ou de 100% em largura nenhuma. */
.ab-areas { list-style: none; margin: 0; padding: 0; }
.ab-no {
  position: absolute;
  width: min(25.5%, 270px);
  transform: translate(-50%, -50%);
}
.ab-no[data-no="clinica"]    { left: 18%; top: 19%; }
.ab-no[data-no="tricologia"] { left: 82%; top: 19%; }
.ab-no[data-no="estetica"]   { left: 50%; top: 86.5%; width: min(36%, 340px); }

.ab-no a {
  display: block; padding-top: 15px;
  border-top: 1px solid var(--fio);
  text-align: center;
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--curva) var(--de), transform .7s var(--curva) var(--de), border-color .5s var(--curva);
}
.ab-palco.viva .ab-no a { opacity: 1; transform: none; }

/* O ESTADO DE MEDIÇÃO. As legendas entram deslocadas 12px para baixo, e
   `getBoundingClientRect` enxerga o deslocamento: medir nesse instante
   punha a chegada de cada linha 12px além do fio. Aqui os deslocamentos
   de ENTRADA são anulados — e só eles — enquanto o desenho é calculado.
   Nada pinta entre ligar e desligar a classe: é tudo no mesmo quadro. */
.ab-palco.medindo .ab-no a { transform: none !important; transition: none !important; }
.ab-palco.medindo .ab-nucleo { transform: translate(-50%, -50%) !important; transition: none !important; }
.ab-no[data-no="clinica"]    a { --de: 1.15s; }
.ab-no[data-no="tricologia"] a { --de: 1.26s; }
.ab-no[data-no="estetica"]   a { --de: 1.37s; }

.ab-no strong {
  display: block; font-weight: 400;
  font-family: var(--serif); font-size: clamp(1.04rem, 1.62vw, 1.32rem);
  line-height: 1.2; color: var(--tinta); letter-spacing: -.005em;
  transition: color .5s var(--curva);
}
.ab-no em {
  display: block; font-style: normal; margin-top: 8px;
  font-size: .715rem; letter-spacing: .1em; line-height: 1.5;
  color: var(--tinta-3);
}
.ab-no a:hover, .ab-no a:focus-visible { border-top-color: var(--champanhe); }

/* O fio de cada legenda fica do lado que olha para o núcleo — embaixo nas
   duas de cima, em cima na de baixo — porque é NELE que a linha chega. A
   ligação não morre no ar perto do texto: ela vira o fio da legenda. */
@media (min-width: 701px) {
  .ab-no[data-no="clinica"] a,
  .ab-no[data-no="tricologia"] a {
    border-top: 0; border-bottom: 1px solid var(--fio);
    padding-top: 0; padding-bottom: 15px;
    transition: opacity .7s var(--curva) var(--de), transform .7s var(--curva) var(--de), border-color .5s var(--curva);
  }
  .ab-no[data-no="clinica"] a:hover,
  .ab-no[data-no="clinica"] a:focus-visible,
  .ab-no[data-no="tricologia"] a:hover,
  .ab-no[data-no="tricologia"] a:focus-visible { border-bottom-color: var(--champanhe); }
}
.ab-no a:hover strong, .ab-no a:focus-visible strong { color: var(--champanhe-3); }

/* --- a resposta ao ponteiro -------------------------------------------
   Aditiva: a área apontada ganha ênfase e as outras duas continuam
   inteiras. Nada some — as três existem ao mesmo tempo, sempre. */

/* clínica — a linha se acende */
.ab-palco.em-clinica .ab-linha[data-area="clinica"] { stroke: rgba(126, 103, 57, .72); stroke-width: 1.5; }
.ab-palco.em-clinica .ab-ponta[data-area="clinica"] { fill: var(--champanhe-3); r: 4.4; }

/* tricologia — o núcleo aprofunda */
.ab-palco.em-tricologia .ab-esfera {
  box-shadow:
    inset -22px -26px 52px rgba(90, 73, 65, .34),
    inset 12px 14px 34px rgba(255, 252, 248, .60),
    0 30px 60px -26px rgba(90, 73, 65, .46);
}
.ab-palco.em-tricologia .ab-anel { stroke: rgba(126, 103, 57, calc(.22 + (1 - var(--t)) * .22)); }
.ab-palco.em-tricologia .ab-linha[data-area="tricologia"] { stroke: rgba(126, 103, 57, .60); }
.ab-palco.em-tricologia .ab-ponta[data-area="tricologia"] { fill: var(--champanhe-3); r: 4.4; }

/* estética — a luz do núcleo cresce, muito pouco */
.ab-palco.em-estetica .ab-esfera {
  background:
    radial-gradient(64% 64% at 34% 28%,
      rgba(255, 255, 253, 1) 0%,
      rgba(250, 238, 226, .95) 32%,
      rgba(233, 205, 190, .84) 58%,
      rgba(196, 165, 149, .58) 81%,
      rgba(150, 126, 111, .30) 100%);
}
.ab-palco.em-estetica .ab-halo { opacity: 1; transform: translateZ(-90px) scale(1.12); }
.ab-palco.em-estetica .ab-legenda em { color: var(--champanhe-3); }
.ab-palco.em-estetica .ab-linha[data-area="estetica"] { stroke: rgba(201, 169, 106, .72); stroke-width: 1.4; }
.ab-palco.em-estetica .ab-ponta[data-area="estetica"] { fill: var(--champanhe); r: 4.4; }

/* --- tablet: mesma lógica, escala menor, distâncias menores ---------- */
@media (max-width: 1024px) {
  .ab-palco { aspect-ratio: 900 / 780; }
  .ab-nucleo { width: min(29%, 226px); top: 43%; }
  .ab-no { width: min(29%, 240px); }
  .ab-no[data-no="clinica"]    { left: 19%; top: 17.5%; }
  .ab-no[data-no="tricologia"] { left: 81%; top: 17.5%; }
  .ab-no[data-no="estetica"]   { left: 50%; top: 87%; width: min(40%, 300px); }
}

/* --- mobile: a mesma ideia de ligação, em coluna ----------------------
   Não faz sentido espremer a composição horizontal em 390px. O núcleo
   fica no topo e uma espinha desce dele até as três — a linha continua
   saindo do centro e chegando a cada especialidade. */
@media (max-width: 700px) {
  .ab-palco {
    aspect-ratio: auto; width: 100%; max-width: 440px;
    display: flex; flex-direction: column; align-items: stretch;
  }
  /* -12% estourava a largura da página: em coluna o palco já ocupa
     quase toda ela, e não há folga lateral para o campo transbordar. */
  .ab-campo { inset: -3% -2%; }
  .ab-nucleo {
    position: relative; left: auto; top: auto;
    width: min(56%, 208px); margin: 0 auto clamp(28px, 8vw, 44px);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }
  .ab-areas { padding-left: clamp(20px, 6vw, 30px); }
  .ab-no {
    position: relative; left: auto; top: auto; width: 100%;
    transform: none;
  }
  /* As posições do desktop usam seletor de atributo e venceriam este
     bloco por especificidade — um left de 18% num elemento relativo
     empurra a legenda para fora do palco. Desfazem-se aqui com o
     mesmo peso de seletor. */
  .ab-no[data-no="clinica"],
  .ab-no[data-no="tricologia"],
  .ab-no[data-no="estetica"] { left: auto; top: auto; }
  .ab-no + .ab-no { margin-top: clamp(20px, 5.5vw, 30px); }
  .ab-no a { text-align: left; padding-top: 14px; }
  .ab-no[data-no="estetica"] { width: 100%; }
  .ab-palco.medindo .ab-nucleo { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-palco .ab-campo, .ab-palco .ab-halo, .ab-palco .ab-esfera,
  .ab-palco .ab-legenda, .ab-palco .ab-anel { opacity: 1 !important; transition: none !important; }
  .ab-palco .ab-anel { animation: none !important; }
  .ab-palco .ab-linha { stroke-dashoffset: 0 !important; transition: none !important; }
  .ab-palco .ab-ponta { opacity: 1 !important; transition: none !important; }
  .ab-palco .ab-pulso { display: none; }
  .ab-palco .ab-no a { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ab-nucleo { transform: translate(-50%, -50%) !important; transition: none !important; }
}

/* ----------------------------------------------------------- A CONSULTA */
.consulta { position: relative; height: 420vh; }
.cs-pino { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cs-fundo { position: absolute; inset: 0; background: linear-gradient(180deg, var(--mineral) 0%, #F1ECE4 52%, var(--mineral) 100%); }
.cs-olho { position: absolute; top: clamp(96px, 15vh, 150px); left: 0; right: 0; z-index: 3; justify-content: center; }
.cs-palco { position: relative; z-index: 2; width: min(760px, 88vw); min-height: 300px; text-align: center; }
.cs-etapa {
  position: absolute; inset: 0; opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--curva), transform .7s var(--curva);
}
.cs-etapa.ativa { opacity: 1; transform: none; }
.cs-num { font-size: .62rem; letter-spacing: .3em; color: var(--champanhe-3); }
.cs-etapa h2 { font-size: clamp(2.6rem, 7.5vw, 6rem); line-height: 1.02; letter-spacing: -0.03em; margin: 14px 0 22px; }
.cs-etapa p { color: var(--tinta-2); font-size: clamp(.98rem, 1.5vw, 1.16rem); max-width: 34ch; margin: 0 auto; }
.cs-trilho {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  bottom: clamp(60px, 11vh, 120px); width: min(260px, 50vw); height: 1px; background: var(--fio);
}
.cs-trilho i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--champanhe); transition: width .3s linear; }

/* ------------------------------------------------------ CLÍNICA (chamada) */
.clinica-teaser { padding: var(--secao) 0 0; }
.ct-larga { width: 100%; aspect-ratio: 16 / 9; }
.ct-texto {
  padding-top: clamp(38px, 5vw, 66px); padding-bottom: var(--secao);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 70px); align-items: end;
}
.ct-acoes { display: flex; flex-wrap: wrap; gap: 26px; grid-column: 1 / -1; margin-top: 10px; }
.aval-titulo { font-size: clamp(1.7rem, 3.4vw, 2.7rem); text-align: center; max-width: 22ch; margin: 0 auto clamp(38px, 5vw, 60px); }

@media (max-width: 980px) {
  .ce-grade { grid-template-columns: 1fr; gap: 22px; }
  .consulta { height: 380vh; }
  .ct-texto { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .capitulos-esp, .consulta { height: auto !important; }
  .ce-pino, .cs-pino { position: relative !important; height: auto !important; min-height: 88svh; }
  .cs-etapa { position: relative; opacity: 1 !important; transform: none !important; margin-bottom: 40px; }
  .cs-palco { min-height: 0; }

  /* O hero entrega a composição final de uma vez: mesma cena, sem a
     sequência e sem o curso de scroll que só existia para animá-la. */
  .hero-cena { height: auto !important; }
  .hc-pino { position: relative !important; height: 100svh; }
  .hc-luz, .hc-brilho, .hc-campo, .hc-retrato,
  .hc-olho, .hc-linha > span, .hc-sub, .hc-acoes, .hc-esp a { animation: none !important; }
  .hc-luz { opacity: .46 !important; transform: translate3d(24%, 0, 0) rotate(-8deg) !important; }
  /* o véu é requisito de contraste, não enfeite: sem ele o título cai
     para 2,8:1 sobre o mauve */
  .hc-brilho, .hc-campo, .hc-retrato { opacity: 1 !important; }
  .hc-retrato { filter: none !important; transform: none !important; }
  .hc-olho, .hc-sub, .hc-acoes, .hc-esp a { opacity: 1 !important; transform: none !important; }
  .hc-linha > span { transform: none !important; }
}

/* ------------------------------------------------- CAPÍTULO "PELE." (home)
   A fotografia entra dentro do próprio capítulo, à esquerda da palavra.

   Só o modificador. `.capitulo` continua servindo /tricologia sem uma
   linha alterada, e este arquivo só é carregado pela home.

   O ponto todo desta seção é a fotografia NÃO ter borda. O fundo do
   estúdio foi corrigido no pipeline até 243,244,239 no alto do quadro —
   praticamente o 247,244,239 da página — e o que resta da queda de luz é
   dissolvido aqui: quatro degradês pintam a COR EXATA do papel sobre as
   bordas, cada um com o alcance que aquele lado precisa. Nas bordas o
   valor é 100% da cor da página, então não existe limite para o olho
   encontrar. Não é máscara nem recorte: é a página avançando sobre a
   fotografia até ela acabar. */
.capitulo-pele {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2.4vw, 46px);
  min-height: 92svh;
  padding: clamp(56px, 8vw, 104px) 0;
  text-align: left;
}

.cp-figura {
  position: relative;
  /* a entrada amplia a fotografia em 1,04: sem recorte ela transborda
     ~8px de cada lado e o celular ganha barra de rolagem horizontal */
  overflow: hidden;
  width: 100%;
  max-width: 560px;
  /* Só a proporção define a altura. Com um teto de altura junto, a
     largura vinha da coluna e a altura do teto: a proporção declarada
     era ignorada, o object-fit comia 17% na vertical e a fotografia
     ainda acabava AMPLIADA na tela (740px de arquivo numa caixa de
     751px). Sem teto, a caixa acompanha o arquivo e nada é inventado. */
  aspect-ratio: 740 / 920;
}
.cp-figura picture, .cp-figura img { display: block; width: 100%; height: 100%; }
.cp-figura img { object-fit: cover; object-position: 60% 34%; }

/* as quatro bordas se dissolvendo no papel. A esquerda tem o alcance
   maior porque é o lado mais escuro do estúdio e o mais vazio; a direita
   tem o menor, que é onde ela está — ali o degradê só esfuma a ponta do
   cabelo, e é isso que faz a figura nascer da página em vez de terminar
   numa aresta. */
.cp-figura::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to right,  var(--mineral) 0%, rgba(247, 244, 239, 0) 32%),
    linear-gradient(to left,   var(--mineral) 0%, rgba(247, 244, 239, 0) 9%),
    linear-gradient(to bottom, var(--mineral) 0%, rgba(247, 244, 239, 0) 15%),
    linear-gradient(to top,    var(--mineral) 0%, rgba(247, 244, 239, 0) 18%);
}

/* a entrada: a figura é só o gatilho do observador; quem se move é a
   fotografia, devagar — este capítulo é silêncio, não impacto */
.cp-figura[data-revela] { opacity: 1; transform: none; transition: none; }
.cp-figura picture {
  transform: scale(1.04); opacity: 0;
  transition: transform 2.4s var(--lento), opacity 1.6s var(--lento);
}
.cp-figura.dentro picture { transform: scale(1); opacity: 1; }

.cp-texto {
  padding-right: max(var(--gutter), calc((100vw - 1340px) / 2 + var(--gutter)));
  padding-left: clamp(4px, 1vw, 20px);
}
/* A palavra é o elemento tipográfico principal, e a escala vem medida:
   a 14vw ela desenhava 318px de glifo numa coluna de 631 — metade da
   coluna vazia à direita, o oposto de presença. A 21vw preenche cerca
   de três quartos e ainda respira. Mesma família, mesma cor, mesmo
   letter-spacing dos outros capítulos: muda a escala, não a linguagem. */
.capitulo-pele .capitulo-palavra { font-size: clamp(3.2rem, 16vw, 15rem); }
.capitulo-pele .capitulo-nota {
  margin-top: clamp(20px, 2.4vw, 32px);
  max-width: 31ch;
}

@media (max-width: 980px) {
  /* em coluna: fotografia em cima, sangrando de borda a borda, e a
     palavra logo abaixo. Os degradês laterais encolhem — numa tela
     estreita, 32% de alcance comeria a figura. */
  .capitulo-pele {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: clamp(22px, 5vw, 40px);
    padding: clamp(56px, 10vw, 92px) 0;
  }
  /* Largura declarada e proporção do próprio arquivo: sem teto de
     altura, que aqui repetia o defeito do desktop — a caixa virava
     paisagem, cortava 23% da base (as mãos junto) e ainda ampliava a
     imagem, 600px de arquivo numa caixa de 759px. */
  .cp-figura { width: min(64%, 520px); aspect-ratio: 740 / 920; }
  /* a palavra tem a linha inteira aqui: pode crescer */
  .capitulo-pele .capitulo-palavra { font-size: clamp(3.2rem, 26vw, 14rem); }
  .cp-figura::after {
    background:
      linear-gradient(to right,  var(--mineral) 0%, rgba(247, 244, 239, 0) 16%),
      linear-gradient(to left,   var(--mineral) 0%, rgba(247, 244, 239, 0) 8%),
      linear-gradient(to bottom, var(--mineral) 0%, rgba(247, 244, 239, 0) 12%),
      linear-gradient(to top,    var(--mineral) 0%, rgba(247, 244, 239, 0) 14%);
  }
  .cp-texto { padding: 0 var(--gutter); }
  .capitulo-pele .capitulo-nota { max-width: 42ch; }
}

@media (max-width: 640px) {
  /* no celular sangra de borda a borda; a proporção continua sendo a do
     arquivo, então segue sem corte nenhum */
  .cp-figura { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-figura picture { opacity: 1 !important; transform: none !important; transition: none !important; }
}