/* Seção 03 · Consultório — como ela trabalha (prefixo me-) */
.me-secao{
  --me-latao:#5c3f10;            /* latão escuro para texto pequeno sobre porcelanato (AA) */
  --me-apagado:#c6b99f;          /* fio e régua antes de acender */
  --me-a:4;                      /* tempos acesos (0 a 4); sem JS, todos */
  --me-p:1;                      /* avanço do fio no celular (0 a 1) */
  background:linear-gradient(var(--gelo-luz),var(--porcelanato) 280px);
  padding-block:var(--respiro) calc(var(--respiro)*.85);
}
.me-secao::after{content:"";position:absolute;inset:auto 0 0 0;height:64px;z-index:-1;pointer-events:none;
  background:linear-gradient(to top in oklab,rgb(120 100 74 / .26),rgb(120 100 74 / 0))}
/* nuvens suaves do porcelanato, como as da parede da foto */
.me-veio{position:absolute;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent 60px,#000 420px);mask-image:linear-gradient(transparent 60px,#000 420px)}
.me-secao .wf-plaqueta{color:var(--me-latao)}

/* abertura */
.me-abre{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start}
.me-titulo{margin-top:26px;font-size:clamp(40px,4.6vw,76px)}
.me-titulo em{color:var(--me-latao)}
.me-foto{margin:30px calc(-1*var(--margem)) 0;justify-self:stretch}
.me-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 68%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 68%,transparent)}
.me-fala{margin-top:-12%;position:relative}
.me-fala .wf-fala{font-size:clamp(23px,2.65vw,38px);line-height:1.24;max-width:17em;text-wrap:balance}
.me-autora{color:var(--me-latao)}

/* a régua do tempo */
.me-obra{position:relative;margin-top:clamp(64px,9vw,120px)}
.me-regua{position:relative;height:2px;border-radius:2px;background:var(--me-apagado)}
.me-regua-luz{position:absolute;inset:0;border-radius:2px;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--latao-fundo),var(--latao) 60%,#e2c079);
  box-shadow:0 0 12px 2px rgb(255 232 180 / .95),0 0 38px 10px rgb(255 240 208 / .6);
  transform:scaleX(calc(var(--me-a)/4));transition:transform 1.1s var(--ease)}
.me-graus{display:none}

/* celular e tablet: o fio desce pela margem, graduado como régua */
.me-tempos{list-style:none;position:relative;display:grid;gap:52px;padding:46px 0 6px 40px}
.me-tempos::before,.me-tempos::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:9px;
  background:linear-gradient(var(--me-apagado),var(--me-apagado)) 0 0/1px 100% no-repeat,
    repeating-linear-gradient(to bottom,var(--me-apagado) 0 1px,transparent 1px 12px) 0 0/7px 100% no-repeat}
.me-tempos::after{background:linear-gradient(var(--latao-fundo),var(--latao-fundo)) 0 0/1px 100% no-repeat,
    repeating-linear-gradient(to bottom,var(--latao-fundo) 0 1px,transparent 1px 12px) 0 0/7px 100% no-repeat;
  clip-path:inset(0 0 calc((1 - var(--me-p))*100%) 0)}
.me-tempo{position:relative;min-width:0}
.me-fio{position:absolute;left:-40px;top:20px;width:9px;height:9px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 38% 32%,#fff3cf,var(--latao) 58%,var(--latao-fundo));
  box-shadow:0 0 9px 3px rgb(255 243 212 / .98),0 0 30px 13px rgb(255 228 172 / .7);
  transition:background-color .6s,box-shadow .9s var(--ease),transform .9s var(--ease)}
.me-fio::before{content:"";position:absolute;left:3.5px;top:3.5px;width:2px;height:2px;border-radius:50%;
  box-shadow:15px -10px 0 .2px #c9a35c,-10px 9px 0 0 #b98f47,24px 7px 0 .8px #d6b46f,10px 19px 0 -.1px #b98f47,-13px -13px 0 .4px #d6b46f,31px -4px 0 -.3px #b98f47,3px -21px 0 0 #c9a35c;
  transition:opacity 1.2s var(--ease),transform 1.4s var(--ease);animation:me-respira 7s ease-in-out infinite alternate}
@keyframes me-respira{from{filter:opacity(.55)}to{filter:opacity(1)}}
.me-viva .me-tempo:not(.me-aceso) .me-fio::before{opacity:0;transform:scale(.3)}
.me-viva .me-tempo.me-aceso .me-fio::before{transition-delay:.75s}
.me-fio::after{content:"";position:absolute;left:9px;top:4px;width:18px;height:1px;background:var(--latao-fundo);transition:opacity .6s}
.me-num{display:block;font-family:var(--f-titulo);font-weight:300;font-size:clamp(50px,5vw,74px);line-height:.95;letter-spacing:.03em;color:var(--me-latao)}
.me-nome{font-family:var(--f-titulo);font-weight:400;font-size:clamp(25px,2.1vw,30px);line-height:1.12;margin-top:14px;color:var(--tinta)}
.me-texto{font-size:clamp(16px,1.15vw,17px);line-height:1.62;color:var(--tinta-2);margin-top:12px;max-width:31em}
.me-texto q{font-family:var(--f-titulo);font-style:italic;font-weight:400;font-size:1.1em;color:var(--tinta);quotes:"“" "”"}
.me-num,.me-nome,.me-texto{transition:opacity .9s var(--ease),color .9s var(--ease)}

/* com JS: cada tempo espera a rolagem chegar para acender */
.me-viva .me-tempo:not(.me-aceso) .me-fio{background:var(--me-apagado);box-shadow:0 0 9px 3px rgb(255 243 212 / 0),0 0 30px 13px rgb(255 228 172 / 0);transform:scale(.66)}
.me-viva .me-tempo:not(.me-aceso) .me-fio::after{opacity:0}
.me-viva .me-tempo:not(.me-aceso) .me-num{color:#a3957c}
.me-viva .me-tempo:not(.me-aceso) .me-nome,.me-viva .me-tempo:not(.me-aceso) .me-texto{opacity:.42}

/* fecho: a fala dela, e o pé da seção */
.me-fecho{margin-top:clamp(64px,9vw,110px)}
.me-fecho .wf-fala{font-size:clamp(29px,3.5vw,54px);line-height:1.12;max-width:13em;text-wrap:balance}
.me-pe{margin-top:clamp(52px,7vw,96px);display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.me-caso{max-width:27em;padding-top:20px;border-top:1px solid var(--latao-fundo)}
.me-caso-rotulo{font-family:var(--f-apoio);font-size:11.5px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;line-height:1.5;color:var(--me-latao)}
.me-caso p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--tinta-2)}
.me-nota{font-size:15px;line-height:1.55;color:var(--tinta-2);max-width:26em}

/* desktop: a régua deitada, os quatro tempos pendurados em fios de alturas diferentes */
@media (min-width:700px) and (max-width:1239px){
  .me-foto img{aspect-ratio:5/4;object-position:50% 34%}
  .me-fala{margin-top:-9%}
}
@media (min-width:1240px){
  .me-abre{min-height:calc(min(44vw,640px)*1.25 - var(--respiro) - 96px);align-content:start}
  .me-foto{position:absolute;top:0;right:0;margin:0;width:min(44vw,640px);z-index:-1}
  .me-foto img{-webkit-mask-image:linear-gradient(to right,transparent 6%,#000 46%),linear-gradient(to bottom,transparent,#000 16%,#000 60%,transparent 96%);
    mask-image:linear-gradient(to right,transparent 6%,#000 46%),linear-gradient(to bottom,transparent,#000 16%,#000 60%,transparent 96%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .me-titulo{margin-top:30px;max-width:9.5em}
  .me-fala{margin-top:50px}
  .me-obra{margin-top:0}
  .me-graus{display:block;position:absolute;left:0;top:2px;width:100%;height:9px;overflow:visible;stroke:var(--me-apagado);stroke-width:9}
  .me-graus--luz{stroke:var(--latao-fundo);clip-path:inset(0 calc(100% - var(--me-a)*25%) 0 0);transition:clip-path 1.1s var(--ease)}
  .me-obra{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:44px;align-items:start}
  .me-regua{grid-column:1/-1}
  .me-tempos{display:contents}
  .me-tempos::before,.me-tempos::after{display:none}
  .me-tempo{grid-row:2}
  .me-tempo:nth-child(n+3){grid-row:2/span 2}
  .me-fecho{grid-row:3;grid-column:1/3;align-self:end;margin-top:64px}
  .me-tempo{--fio:calc(60px + var(--n)*124px);padding-top:calc(var(--fio) + 36px)}
  .me-tempo::before,.me-tempo::after{content:"";position:absolute;left:0;top:0;width:1px;height:var(--fio);background:var(--me-apagado)}
  .me-tempo::after{background:linear-gradient(var(--latao-fundo),var(--latao));transform-origin:50% 0;transition:transform .9s var(--ease)}
  .me-fio{left:-4px;top:calc(var(--fio) - 4px)}
  .me-fio::after{display:none}
  .me-viva .me-tempo:not(.me-aceso)::after{transform:scaleY(0)}
  .me-viva .me-tempo.me-aceso .me-fio{transition-delay:.5s}
  .me-viva .me-tempo.me-aceso .me-num,.me-viva .me-tempo.me-aceso .me-nome,.me-viva .me-tempo.me-aceso .me-texto{transition-delay:.4s}
  .me-pe{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:44px;align-items:end}
  .me-caso{grid-column:3/5;grid-row:1;max-width:none}
  .me-nota{grid-column:1/3;grid-row:1}
}