/* Seção "O médico" · prefixo med- */
.med-grade{display:grid;grid-template-columns:54% minmax(0,1fr);gap:clamp(2rem,4.5vw,4rem);align-items:center}

/* figura: ele, grande, diante do tronco (o tronco sai pela borda esquerda) */
.med-figura{--med-l:clamp(19rem,36vw,33rem);position:relative;width:var(--med-l);aspect-ratio:1080/1200;justify-self:start;margin-left:-2.8vw}
.med-tronco{position:absolute;left:50%;top:53.33%;width:190%;aspect-ratio:1051/1013;transform:translate(-50%,-50%);filter:drop-shadow(0 2.2rem 2.6rem rgba(70,36,12,.34))}
.med-tronco img{width:100%;height:100%;max-width:none}
/* cerne mais fundo atrás do rosto */
.med-tronco::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side at 52% 52% in oklab,rgba(24,12,6,.78) 0%,rgba(30,15,7,.66) 46%,rgba(40,20,9,.3) 62%,rgba(40,20,9,0) 74%);mix-blend-mode:multiply}
.med-arco{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.med-arco-frase{font-family:var(--b-serif);font-style:italic;font-size:25px;fill:var(--b-tinta);paint-order:stroke;stroke:rgba(240,190,128,.42);stroke-width:3.4px;stroke-linejoin:round;letter-spacing:.012em}
.med-arco-quem{font-family:var(--b-sans);font-weight:500;font-size:17.5px;fill:var(--b-tinta);fill-opacity:.86;paint-order:stroke;stroke:rgba(240,190,128,.34);stroke-width:2.8px;stroke-linejoin:round;letter-spacing:.05em}
.med-retrato{position:relative;width:100%;height:auto;
  -webkit-mask:linear-gradient(#000,#000) top/100% 53.4% no-repeat,radial-gradient(51.85% 46.67% at 50% 53.33%,#000 99.6%,transparent 100%);
  mask:linear-gradient(#000,#000) top/100% 53.4% no-repeat,radial-gradient(51.85% 46.67% at 50% 53.33%,#000 99.6%,transparent 100%)}

/* gesto: o tronco cresce de dentro para fora e ele aparece */
.w-js .med-tronco{clip-path:circle(0% at 52% 52%);transition:clip-path 1.8s var(--w-curva)}
.w-js .med-retrato{opacity:0;transform:translateY(14px);transition:opacity 1s var(--w-curva) .5s,transform 1s var(--w-curva) .5s}
.w-js .med-arco text{opacity:0;transition:opacity 1.2s ease 1.3s}
.w-js .med-aneis,.w-js .med-figura::before{opacity:0;transition:opacity 1.6s ease .9s}
.w-js .med-visto .med-aneis,.w-js .med-visto.med-figura::before{opacity:1}
.w-js .med-visto .med-tronco{clip-path:circle(75% at 52% 52%)}
.w-js .med-visto .med-retrato{opacity:1;transform:none}
.w-js .med-visto .med-arco text{opacity:1}

.med-titulo{font-size:clamp(2.3rem,1rem + 4.2vw,4.5rem);line-height:1}
.med-titulo span,.med-titulo em{display:block;white-space:nowrap}
/* os anéis continuam para fora do tronco, por trás do texto */
.med-aneis{position:absolute;z-index:-1;left:50%;top:53.33%;width:560%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,transparent 0 26px,rgba(138,74,28,.13) 26px 27px),repeating-radial-gradient(circle,transparent 0 41px,rgba(138,74,28,.09) 41px 42.5px);
  -webkit-mask:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.55) 48%,transparent 82%);mask:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.55) 48%,transparent 82%)}
/* a sombra dele sobre a madeira */
.med-figura::before{content:"";position:absolute;left:-1.85%;top:6.67%;width:103.7%;height:93.33%;border-radius:50%;z-index:1;background:rgba(20,10,5,.5);box-shadow:0 0 2.6rem 1rem rgba(20,10,5,.55),0 0 0 1px rgba(255,214,150,.22)}
.med-retrato{z-index:2}
.med-lide{margin-top:1.6rem;max-width:25em;color:var(--w-tinta)}
.med-corpo{margin-top:1.4rem;display:grid;gap:1rem}
.med-cita{display:none}
.med-registros{list-style:none;margin:2.4rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--w-linha-clara);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 1.8rem}
.med-registros li{display:flex;flex-direction:column;gap:.15rem}
.med-registros b{font-family:var(--b-serif);font-weight:400;font-size:clamp(1.2rem,1rem + .6vw,1.5rem);line-height:1.2;white-space:nowrap}
.med-registros span{font-size:var(--w-t-mini);color:var(--w-tinta-2);letter-spacing:.1em;text-transform:uppercase}

/* abaixo de 1250 px a frase sobre o arco ficaria menor que 14 px: ela desce para o texto */
@media (max-width:1249px){
  .med-arco{display:none}
  .med-cita{display:block;margin-top:2rem;padding-left:1.2rem;border-left:1px solid var(--w-linha-clara)}
}
@media (max-width:999px){
  .med{padding-top:2.5rem}
  .med-grade{grid-template-columns:minmax(0,1fr);gap:0}
  .med-figura{--med-l:min(78vw,23rem);justify-self:center;margin:0 0 calc(var(--med-l)*.36)}
  .med-tronco{width:150%}
  .med-titulo{font-size:clamp(2.5rem,11.5vw,3.6rem)}
  .med-aneis{width:420%}
  .med-registros{flex-direction:column;gap:.9rem}
  .med-registros li{flex-direction:row;align-items:baseline;justify-content:space-between;gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .w-js .med-tronco{clip-path:none}
  .w-js .med-retrato,.w-js .med-arco text,.w-js .med-aneis,.w-js .med-figura::before{opacity:1;transform:none}
}