/* =========================================================================
   ESPECIALIDADES — o que as três páginas têm em comum, e o que só existe
   em cada uma. Mesma marca, três mundos.
   ========================================================================= */

/* ------------------------------------------------------ HERO DE CAPÍTULO */
.esp-hero { position: relative; height: 240vh; }
.eh-pino {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 118px 0 clamp(26px, 4vh, 46px);
}
.eh-veu {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(102% 76% at 14% 76%, rgba(247, 244, 239, .93) 0%, rgba(247, 244, 239, 0) 60%),
    linear-gradient(180deg, rgba(247, 244, 239, .60) 0%, rgba(247, 244, 239, 0) 26%, rgba(247, 244, 239, .08) 58%, rgba(247, 244, 239, .90) 100%);
}
.eh-conteudo, .eh-rodape { position: relative; z-index: 5; width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 var(--gutter); }
.eh-numero { font-size: .62rem; letter-spacing: .3em; color: var(--champanhe-3); }
.eh-titulo { font-size: clamp(2.1rem, 5.2vw, 4.5rem); line-height: 1.04; letter-spacing: -0.02em; max-width: 16ch; margin: 16px 0 26px; }
.eh-sub { font-size: clamp(.96rem, 1.3vw, 1.12rem); color: var(--tinta-2); max-width: 44ch; }
.eh-acoes { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 38px; }
.esp-hero [data-cena] { opacity: 0; transform: translateY(20px); transition: opacity 1.3s var(--lento), transform 1.3s var(--lento); }
.esp-hero [data-cena].dentro { opacity: 1; transform: none; }
.esp-hero h1[data-cena] { transform: none; }

/* Migalha: onde o visitante está dentro da marca. */
.migalha {
  position: absolute; top: clamp(94px, 13vh, 132px); left: 0; right: 0; z-index: 5;
  max-width: 1340px; margin: 0 auto; padding: 0 var(--gutter);
  font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-3);
}
.migalha a { transition: color .4s; }
.migalha a:hover { color: var(--champanhe-3); }
.migalha i { font-style: normal; padding: 0 .6em; opacity: .5; }

/* ------------------------------------------------------------ CONDIÇÕES
   Cada condição é uma palavra que abre. Nada de grid de cartões: a lista
   é uma pauta clínica, e só se aprofunda o que interessa. */
.condicoes { padding: var(--secao) 0; }
.cd-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(44px, 6vw, 76px); }
.cd-botao {
  display: flex; align-items: baseline; gap: 20px; width: 100%; text-align: left;
  padding: clamp(20px, 2.6vw, 32px) 0;
  font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.15; color: var(--tinta);
  transition: padding-left .5s var(--curva), color .5s;
}
.cd-botao .cd-sinal { margin-left: auto; width: 14px; height: 14px; position: relative; flex: none; align-self: center; }
.cd-botao .cd-sinal::before, .cd-botao .cd-sinal::after {
  content: ''; position: absolute; background: var(--tinta-3); transition: transform .5s var(--curva), background .4s;
}
.cd-botao .cd-sinal::before { left: 0; top: 50%; width: 14px; height: 1px; }
.cd-botao .cd-sinal::after { top: 0; left: 50%; width: 1px; height: 14px; }
.cd-item.aberto .cd-botao { padding-left: 16px; }
.cd-item.aberto .cd-sinal::after { transform: scaleY(0); }
.cd-item.aberto .cd-sinal::before { background: var(--champanhe); }
.cd-botao:hover { padding-left: 10px; }
.cd-corpo { overflow: hidden; height: 0; transition: height .6s var(--curva); }
.cd-corpo-interno { padding: 0 0 clamp(26px, 3vw, 40px) clamp(0px, 3vw, 56px); max-width: 62ch; }
.cd-corpo p { color: var(--tinta-2); font-size: 1rem; line-height: 1.9; }
.cd-corpo p + p { margin-top: 1.1em; }

/* =========================================================================
   TRICOLOGIA — o ciclo capilar
   Um folículo em corte, e o mesmo fio percorrendo as quatro fases. O
   scroll não decora: ele avança o ciclo.
   ========================================================================= */
.ciclo { position: relative; height: 420vh; }
.ci-pino { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.ci-grade {
  position: relative; z-index: 3; width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); gap: clamp(30px, 5vw, 86px); align-items: center;
}
.ci-texto { position: relative; }
.ci-fases { position: relative; min-height: 250px; }
.ci-fase { position: absolute; inset: 0; opacity: 0; transform: translateY(18px); transition: opacity .7s var(--curva), transform .7s var(--curva); }
.ci-fase.ativa { opacity: 1; transform: none; }
.ci-fase span { font-size: .6rem; letter-spacing: .28em; color: var(--champanhe); }
.ci-fase h3 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); margin: 12px 0 18px; }
.ci-fase p { color: var(--tinta-2); font-size: 1rem; line-height: 1.9; max-width: 42ch; }
.ci-desenho { position: relative; display: grid; place-items: center; }
.ci-svg { width: min(500px, 96%); height: auto; }
.ci-svg .pele-linha { fill: none; stroke: rgba(242, 237, 228, .30); stroke-width: 1.2; }
.ci-svg .foliculo { fill: none; stroke: rgba(242, 237, 228, .55); stroke-width: 1.4; }
.ci-svg .bulbo { fill: rgba(201, 169, 106, .12); stroke: var(--champanhe); stroke-width: 1.3; }
.ci-svg .haste { stroke: var(--champanhe-2); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.ci-svg .papila { fill: var(--champanhe); }
.ci-svg text { font-family: var(--sans); font-size: 10px; letter-spacing: .22em; fill: rgba(242, 237, 228, .5); }
.ci-trilho { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: clamp(46px, 8vh, 90px); height: 1px; background: rgba(242, 237, 228, .14); max-width: 1340px; margin: 0 auto; }
.ci-trilho i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--champanhe); transition: width .3s linear; }

/* =========================================================================
   ESTÉTICA — luz sobre o rosto
   A luz percorre a silhueta. O rosto não muda: ganha volume. É o oposto
   visual de uma transformação.
   ========================================================================= */
.estetica-luz { position: relative; height: 380vh; }
.el-pino { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #100E0A; }
.el-fundo { position: absolute; inset: 0; background: radial-gradient(56% 56% at 50% 44%, rgba(96, 78, 56, .26) 0%, rgba(16, 14, 10, 0) 72%); }
.el-mascara {
  position: absolute; inset: 0; z-index: 2;
  -webkit-mask-image: var(--silhueta); mask-image: var(--silhueta);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 74% 46%; mask-position: 74% 46%;
  -webkit-mask-size: auto var(--ms, 92%); mask-size: auto var(--ms, 92%);
}
/* o corte reto embaixo da silhueta some no fundo, como sombra */
.el-pino::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 14, 10, 0) 0%, rgba(16, 14, 10, .92) 74%, #100E0A 100%);
}
.el-sombra {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(46% 52% at var(--lx, 50%) var(--ly, 42%), rgba(255, 246, 228, .30) 0%, rgba(255, 246, 228, .06) 34%, rgba(16, 14, 10, .74) 76%);
  mix-blend-mode: multiply;
}
.el-brilho {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(30% 34% at var(--lx, 50%) var(--ly, 42%), rgba(255, 250, 236, .26) 0%, rgba(255, 250, 236, 0) 70%);
  mix-blend-mode: screen;
}
/* O texto vive à esquerda; o rosto, à direita. Nada se sobrepõe — e a
   leitura não disputa espaço com a luz. */
.el-texto {
  position: absolute; z-index: 6; left: 0; top: 50%; transform: translateY(-50%);
  width: 100%; max-width: 1340px; padding: 0 var(--gutter);
  left: 50%; margin-left: max(-670px, -50vw);
}
.el-texto h2 { font-size: clamp(1.8rem, 3.9vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; color: #F4EEE2; max-width: 15ch; }
.el-texto p { margin-top: 24px; color: #C6BEAF; font-size: 1.01rem; line-height: 1.9; max-width: 40ch; }
.el-assinatura {
  position: absolute; z-index: 6; left: 50%; margin-left: max(-670px, -50vw);
  width: 100%; max-width: 1340px; padding: 0 var(--gutter);
  bottom: clamp(56px, 11vh, 118px); text-align: left;
  opacity: 0; transition: opacity 1s var(--curva);
}
.el-assinatura.visivel { opacity: 1; }
.el-assinatura strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.6rem); color: #F4EEE2; }
.el-assinatura em { display: block; margin-top: 12px; font-style: normal; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--champanhe-2); }
.el-dica {
  position: absolute; z-index: 6; left: 50%; margin-left: max(-670px, -50vw);
  width: 100%; max-width: 1340px; padding: 0 var(--gutter);
  top: clamp(96px, 14vh, 140px); text-align: left;
  font-size: .56rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(242, 237, 228, .34);
}

/* ============================================================ RESPONSIVO */
@media (max-width: 980px) {
  .esp-hero { height: 200vh; }
  .cd-cabeca { grid-template-columns: 1fr; }
  .ciclo { height: 380vh; }
  .ci-grade { grid-template-columns: 1fr; gap: 24px; }
  .ci-fases { min-height: 210px; }
  .ci-svg { width: min(240px, 62%); }
  .ci-passos { font-size: .5rem; letter-spacing: .14em; }
  .estetica-luz { height: 320vh; }
  /* no celular o rosto sobe e o texto ocupa a base: nada se sobrepõe */
  .el-mascara { -webkit-mask-position: center 22%; mask-position: center 22%; -webkit-mask-size: auto 56%; mask-size: auto 56%; }
  .el-pino::after { height: 46%; }
  .el-texto { top: auto; bottom: 27%; transform: none; }
  .el-texto h2 { max-width: 18ch; }
  .el-assinatura { bottom: clamp(30px, 6vh, 60px); }
  .el-dica { display: none; }
}
@media (max-width: 680px) {
  .eh-acoes .btn, .fc-acoes .btn { flex: 1 1 100%; }
  .eh-rodape span + span { display: none; }
  .ci-passos span:nth-child(even) { display: none; }
  .cd-corpo-interno { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .esp-hero, .ciclo, .estetica-luz { height: auto !important; }
  .eh-pino, .ci-pino, .el-pino { position: relative !important; height: auto !important; min-height: 88svh; }
  .ci-fase { position: relative; opacity: 1 !important; transform: none !important; margin-bottom: 34px; }
  .ci-fases { min-height: 0; }
  .el-assinatura { opacity: 1 !important; position: relative; margin-top: 40px; }
}
.trilha a.ativo { opacity: 1; color: var(--champanhe-3); }
.trilha a.ativo i { width: 30px; background: var(--champanhe); }
@media (max-width: 1180px) { .trilha { display: none; } }

/* =========================================================================
   VARREDURA — segunda etapa: quase imperceptível
   Nada de faixa luminosa de interface. É uma leitura passando: a luz
   sobe um pouco, e só.
   ========================================================================= */
.campo-varredura {
  height: 34%;
  background: linear-gradient(180deg,
    rgba(255, 252, 245, 0) 0%,
    rgba(255, 252, 245, .16) 46%,
    rgba(255, 250, 240, .30) 78%,
    rgba(201, 169, 106, .22) 93%,
    rgba(201, 169, 106, 0) 100%);
}
.ponto-analise i { width: 7px; height: 7px; border-color: rgba(201, 169, 106, .8); background: rgba(255, 252, 246, .22); }
.ponto-analise b { font-size: .52rem; letter-spacing: .22em; color: #4A4234; }
.ponto-analise { transition: opacity 1.3s var(--curva); }

/* =========================================================================
   PERSONALIDADE DE CADA CAPÍTULO — segunda etapa
   Mesma marca, três temperamentos. O que muda é a luz, o ritmo e o
   quanto a página fala — não o sistema.
   ========================================================================= */

/* CLÍNICA — científica, analítica, silenciosa.
   Véu mais fechado, mais respiro entre blocos, acento mais contido. */
.pg-clinica { --secao: clamp(128px, 16vw, 240px); }
.pg-clinica .eh-veu {
  background:
    radial-gradient(96% 74% at 12% 78%, rgba(247, 244, 239, .96) 0%, rgba(247, 244, 239, 0) 56%),
    linear-gradient(180deg, rgba(247, 244, 239, .70) 0%, rgba(247, 244, 239, .06) 30%, rgba(247, 244, 239, .16) 58%, rgba(247, 244, 239, .94) 100%);
}
.pg-clinica .eh-titulo { max-width: 14ch; }
.pg-clinica .cd-botao { font-size: clamp(1.3rem, 2.6vw, 2.05rem); }

/* TRICOLOGIA — orgânica, fluida, viva.
   Véu mais aberto e quente: a superfície fica mais presente. */
.pg-tricologia .eh-veu {
  background:
    radial-gradient(110% 80% at 16% 74%, rgba(247, 244, 239, .90) 0%, rgba(247, 244, 239, 0) 64%),
    linear-gradient(180deg, rgba(247, 244, 239, .48) 0%, rgba(247, 244, 239, 0) 24%, rgba(247, 244, 239, .04) 60%, rgba(247, 244, 239, .88) 100%);
}
.pg-tricologia .capitulo { min-height: 72svh; }

/* ESTÉTICA — luminosa, elegante, arquitetônica.
   Mais claro no alto, mais ar entre os elementos, títulos mais abertos. */
.pg-estetica { --secao: clamp(120px, 15vw, 230px); }
.pg-estetica .eh-veu {
  background:
    radial-gradient(104% 80% at 14% 76%, rgba(251, 249, 245, .94) 0%, rgba(251, 249, 245, 0) 58%),
    linear-gradient(180deg, rgba(251, 249, 245, .74) 0%, rgba(251, 249, 245, .04) 32%, rgba(251, 249, 245, .10) 62%, rgba(247, 244, 239, .92) 100%);
}
.pg-estetica .eh-titulo { letter-spacing: -0.024em; }
.pg-estetica .cd-cabeca { margin-bottom: clamp(56px, 7vw, 96px); }

/* =========================================================================
   RESPIRO — uma imagem, uma frase
   O bloco em que a página para de explicar. Só existe nas páginas de
   capítulo, e só uma vez em cada.
   ========================================================================= */
.respiro { padding: var(--secao) 0; }
.respiro-grade {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 110px); align-items: center;
}
.respiro-invertido .respiro-grade { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); direction: rtl; }
.respiro-invertido .respiro-grade > * { direction: ltr; }
.respiro-chapa { aspect-ratio: 3 / 4; width: 100%; }
.respiro-texto .titulo { max-width: 13ch; margin-bottom: 34px; }
@media (max-width: 980px) {
  .respiro-grade, .respiro-invertido .respiro-grade { grid-template-columns: 1fr; direction: ltr; }
  .respiro-chapa { max-width: 460px; }
}

/* =========================================================================
   ESTÉTICA COM FOTOGRAFIA
   A silhueta procedural sai de cena: agora a luz percorre o rosto real.
   O gesto é o mesmo — nada se transforma, só a luz muda de lugar.
   ========================================================================= */
.el-com-foto { -webkit-mask-image: none; mask-image: none; }
.el-com-foto picture {
  position: absolute; top: 50%; left: 72%; transform: translate(-50%, -50%);
  display: block; width: min(540px, 62vw); height: min(760px, 82svh);
  -webkit-mask-image: radial-gradient(62% 58% at 50% 42%, #000 44%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(62% 58% at 50% 42%, #000 44%, rgba(0, 0, 0, 0) 100%);
}
.el-com-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
/* a fotografia já tem luz própria: o véu que se move entra mais discreto */
.pg-estetica .el-sombra {
  background: radial-gradient(52% 58% at var(--lx, 50%) var(--ly, 42%), rgba(255, 246, 228, .16) 0%, rgba(255, 246, 228, .04) 38%, rgba(16, 14, 10, .58) 80%);
}
.pg-estetica .el-brilho {
  background: radial-gradient(26% 30% at var(--lx, 50%) var(--ly, 42%), rgba(255, 250, 236, .18) 0%, rgba(255, 250, 236, 0) 72%);
}
@media (max-width: 980px) {
  .el-com-foto picture { left: 50%; top: 34%; width: min(340px, 74vw); height: min(470px, 52svh); }
}

/* A trilha de capítulos ocupa a margem esquerda: o conteúdo recua para
   não encostar nela — e a página ganha mais respiro no caminho. */
@media (min-width: 1181px) {
  .pg-clinica { --gutter: clamp(22px, 8.5vw, 132px); }
}