/* opera (prefixo op-) · "Só contorno corporal." · fundo noite
   A medida volta reta: três trechos acesos (mama, abdômen, lipoaspiração), a marca âmbar onde ele para,
   e o que fica fora da conta, tracejado e apagado. */

.op{
  --op-escala-alt:150px;
  background:var(--noite);color:var(--pedra);overflow:hidden;
  padding-top:calc(var(--respiro) * .9);
}
.op > .wf-miolo{z-index:2}

/* ───────── a noite desta seção: três manchas, devagar ───────── */
.op-malha{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.op-malha i{position:absolute;display:block;border-radius:50%;filter:blur(28px);will-change:transform}
.op-malha i:nth-child(1){
  right:-22vmax;top:-18vmax;width:70vmax;height:60vmax;
  background:radial-gradient(closest-side in oklch,rgb(159 211 230 / .30) 0%,rgb(86 158 178 / .14) 46%,rgb(6 38 44 / 0) 100%);
  animation:op-respira-1 30s ease-in-out infinite alternate;
}
.op-malha i:nth-child(2){
  left:-26vmax;top:22%;width:72vmax;height:62vmax;
  background:radial-gradient(closest-side in oklch,rgb(11 70 81 / .85) 0%,rgb(11 58 67 / .40) 48%,rgb(6 38 44 / 0) 100%);
  animation:op-respira-2 36s ease-in-out infinite alternate;
}
.op-malha i:nth-child(3){
  right:-16vmax;bottom:-30vmax;width:70vmax;height:60vmax;
  background:radial-gradient(closest-side in oklch,rgb(45 111 176 / .34) 0%,rgb(30 78 124 / .18) 50%,rgb(6 38 44 / 0) 100%);
  animation:op-respira-3 26s ease-in-out infinite alternate;
}
@keyframes op-respira-1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4vmax,3vmax,0) scale(1.1)}}
@keyframes op-respira-2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5vmax,-4vmax,0) scale(1.12)}}
@keyframes op-respira-3{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(-5vmax,-3vmax,0) scale(.94)}}
.op-malha.wf-pausa i{animation-play-state:paused}

/* ───────── cabeça ───────── */
.op-cabeca{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;
  gap:0 clamp(24px,4vw,64px);
}
.op-texto{padding-bottom:clamp(8px,2vh,20px)}
.op-texto .wf-apoio{margin-top:clamp(18px,3vh,28px)}
.op-texto q{quotes:"“" "”";font-style:italic;color:var(--pedra-forte)}

/* fotos: dissolvidas na noite, nunca com borda */
.op-foto{margin:0;position:relative;pointer-events:none}
.op-foto img{display:block;width:100%;height:100%;object-fit:cover}
.op-foto--cima{
  justify-self:end;width:min(100%,520px);aspect-ratio:4/5;
  margin-bottom:calc(var(--op-escala-alt) * -.9);margin-right:calc(var(--margem) * -.4);
}
.op-foto--cima img{
  object-position:50% 30%;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 44%,#000 38%,rgb(0 0 0 / .5) 68%,transparent 100%),linear-gradient(180deg,#000 0 56%,rgb(0 0 0 / .45) 74%,transparent 92%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 44%,#000 38%,rgb(0 0 0 / .5) 68%,transparent 100%),linear-gradient(180deg,#000 0 56%,rgb(0 0 0 / .45) 74%,transparent 92%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* ───────── a medida ───────── */
.op-medida{position:relative;z-index:1;margin-top:clamp(8px,1.6vh,16px)}
.op-escala{position:relative;width:100%;height:var(--op-escala-alt)}
.op-escala svg{position:absolute;left:0;top:0;display:block;overflow:visible}
.op-escala-texto{font-size:.9375rem;color:var(--pedra-media)}

.op-base{fill:none;stroke:var(--pedra);stroke-opacity:.30;stroke-width:1}
.op-trac{fill:none;stroke:var(--pedra);stroke-opacity:.5;stroke-width:1}
.op-tick{stroke:var(--pedra);stroke-opacity:.40;stroke-width:1}
.op-tick.op-hora{stroke-opacity:.78}
.op-tick.op-fora-t{stroke-opacity:.26}
.op-s{fill:none;stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:0}
.op-s1,.op-s3{stroke:var(--ciano)}
.op-s2{stroke:var(--pedra)}
.op-brilho{filter:url(#op-brilho);stroke-width:5;opacity:.5}
.op-rot{fill:var(--pedra);font-family:var(--f-titulo);font-weight:500;letter-spacing:.055em;text-rendering:geometricPrecision}
.op-rot .h{fill:var(--ciano)}
.op-rot.op-r2 .h{fill:var(--pedra);fill-opacity:.82}
.op-fora{fill:var(--pedra);fill-opacity:.56;font-family:var(--f-titulo);font-weight:500;letter-spacing:.055em;text-rendering:geometricPrecision}
.op-limite{stroke:var(--ambar);stroke-width:1.5;stroke-linecap:round}
.op-losango{fill:var(--ambar)}
.op-halo{fill:var(--ambar);opacity:.42}
.op-leg{fill:var(--pedra);fill-opacity:.7;font-family:var(--f-texto);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.op-leg--fora{fill-opacity:.56}
.op-para{fill:var(--ambar);font-family:var(--f-titulo);font-weight:600;letter-spacing:.06em}

/* entrada da escala: um trecho, outro, outro, a marca, o resto. Uma vez só. */
.op-escala.anim .op-gbase{opacity:0}
.op-escala.anim .op-s{stroke-dashoffset:1}
.op-escala.anim .op-r1,.op-escala.anim .op-r2,.op-escala.anim .op-r3,
.op-escala.anim .op-glim,.op-escala.anim .op-para,.op-escala.anim .op-gtrac{opacity:0}
.op-escala.anim.on .op-gbase{animation:op-surgir .9s ease both}
.op-escala.anim.on .op-s1{animation:op-tracar .7s var(--ease-traco) .4s both}
.op-escala.anim.on .op-r1{animation:op-surgir .5s ease .85s both}
.op-escala.anim.on .op-s2{animation:op-tracar .7s var(--ease-traco) 1s both}
.op-escala.anim.on .op-r2{animation:op-surgir .5s ease 1.45s both}
.op-escala.anim.on .op-s3{animation:op-tracar .7s var(--ease-traco) 1.6s both}
.op-escala.anim.on .op-r3{animation:op-surgir .5s ease 2.05s both}
.op-escala.anim.on .op-glim{animation:op-pousar .5s var(--ease) 2.35s both}
.op-escala.anim.on .op-para{animation:op-surgir .6s ease 2.6s both}
.op-escala.anim.on .op-gtrac{animation:op-surgir-fim .9s ease 2.8s both}
@keyframes op-surgir{from{opacity:0}to{opacity:1}}
@keyframes op-surgir-fim{from{opacity:0}to{opacity:1}}
@keyframes op-tracar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes op-pousar{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}

/* ───────── a lista ───────── */
.op-lista{margin-top:clamp(28px,5vh,56px);border-top:1px solid var(--fio)}
.op-item{
  display:grid;grid-template-columns:64px minmax(0,.8fr) minmax(0,1.5fr) minmax(0,.62fr);
  gap:0 clamp(20px,3vw,48px);align-items:start;
  padding:clamp(28px,4.4vh,46px) 0;border-bottom:1px solid var(--fio);
}
.op-num{
  font:500 clamp(1.5rem,2vw,1.875rem)/1 var(--f-titulo);letter-spacing:.055em;color:var(--ciano);
  font-variant-numeric:tabular-nums;padding-top:.42em;
}
.op-h3{font:500 clamp(2.4rem,4.2vw,3.75rem)/.9 var(--f-titulo);letter-spacing:-.004em;color:var(--pedra)}
.op-sub{margin-top:12px;font:500 1.0625rem/1.3 var(--f-titulo);letter-spacing:.055em;color:var(--pedra-media);max-width:16em}
.op-corpo{padding-top:.35em}
.op-p{max-width:38em;text-wrap:pretty;font-size:var(--t-apoio);line-height:1.52;color:var(--pedra-media)}
.op-p + .op-p{margin-top:.9em}
.op-p strong{font-weight:600;color:var(--pedra)}
.op-fala{margin-top:clamp(16px,2.4vh,24px);padding-top:clamp(14px,2vh,20px);border-top:1px solid var(--fio-fraco)}
.op-nota{
  display:flex;align-items:flex-start;gap:12px;padding-top:.55em;max-width:15em;
  font:500 clamp(1.125rem,1.4vw,1.375rem)/1.25 var(--f-titulo);letter-spacing:.055em;color:var(--pedra-forte);text-wrap:pretty;
}
.op-nota-marca{flex:none;width:28px;height:1px;background:var(--ciano);opacity:.9;margin-top:.6em}
.op-foto--protese{width:100%;max-width:320px;aspect-ratio:1/1;justify-self:end;margin:-1.2em -1em -1.4em 0}
.op-foto--protese img{
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 30%,rgb(0 0 0 / .45) 64%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 30%,rgb(0 0 0 / .45) 64%,transparent 100%);
}

/* ───────── fecho ───────── */
.op-fecho{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;
  gap:0 clamp(8px,2vw,32px);margin-top:clamp(28px,5vh,56px);
}
.op-foto--perfil{width:min(100%,520px);aspect-ratio:1/1;margin-left:calc(var(--margem) * -.5)}
.op-foto--perfil img{
  object-position:50% 40%;
  --m1:radial-gradient(ellipse 50% 50% at 50% 48%,#000 34%,rgb(0 0 0 / .5) 66%,transparent 100%);
  --m2:linear-gradient(90deg,transparent 4%,rgb(0 0 0 / .55) 22%,#000 40%);
  --m3:linear-gradient(180deg,transparent 2%,rgb(0 0 0 / .5) 22%,#000 42%);
  -webkit-mask-image:var(--m1),var(--m2),var(--m3);mask-image:var(--m1),var(--m2),var(--m3);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.op-destaque{max-width:13em;color:var(--pedra);text-wrap:balance;font-size:clamp(2.2rem,3.6vw,3.4rem)}
.op-fecho-texto{margin-left:calc(var(--margem) * -.6)}
.op-fecho-texto .wf-legenda{margin-top:12px}
.op-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(22px,3.4vh,34px)}

/* ───────── telas largas e baixas ───────── */
@media (min-width:821px) and (max-height:700px){
  .op{--op-escala-alt:130px}
}

/* ───────── celular e tablet: coluna única ───────── */
@media (max-width:820px){
  .op{--op-escala-alt:128px;padding-top:var(--respiro)}
  .op-cabeca{grid-template-columns:minmax(0,1fr);gap:0}
  .op-texto{padding-bottom:0}
  .op-foto--cima{
    justify-self:end;width:min(84%,420px);aspect-ratio:1/1;margin:clamp(6px,2vh,16px) calc(var(--margem) * -.5) calc(var(--op-escala-alt) * -.72) 0;
  }
  .op-foto--cima img{
    object-position:50% 28%;
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 36%,rgb(0 0 0 / .5) 68%,transparent 100%),linear-gradient(180deg,#000 0 50%,rgb(0 0 0 / .4) 74%,transparent 92%);
            mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 36%,rgb(0 0 0 / .5) 68%,transparent 100%),linear-gradient(180deg,#000 0 50%,rgb(0 0 0 / .4) 74%,transparent 92%);
  }
  .op-medida{margin-top:0}
  .op-lista{margin-top:clamp(20px,4vh,36px)}
  .op-item{grid-template-columns:44px minmax(0,1fr);gap:6px 14px;padding:24px 0}
  .op-item--mama{grid-template-columns:44px minmax(0,1fr) 112px}
  .op-item--mama .op-nome{grid-column:2;grid-row:1}
  .op-item--mama .op-corpo{grid-column:2 / span 2;grid-row:2}
  .op-num{padding-top:.45em;font-size:1.125rem}
  .op-nome{grid-column:2}
  .op-corpo{grid-column:2;padding-top:4px}
  .op-h3{font-size:clamp(2.25rem,9.5vw,3rem)}
  .op-sub{font-size:1rem;margin-top:8px}
  .op-p{font-size:1rem}
  .op-nota{grid-column:2 / -1;font-size:1.0625rem;padding-top:0;margin-top:14px;max-width:none}
  .op-fecho-texto{margin-left:0}
  .op-foto--protese{grid-column:3;grid-row:1;width:144px;max-width:none;justify-self:end;align-self:start;margin:-28px -26px -10px 0}
  .op-fecho{grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(28px,5vh,48px)}
  .op-foto--perfil{width:min(80%,360px);aspect-ratio:1/1;margin:0 0 -40px calc(var(--margem) * -.6)}
  .op-foto--perfil img{object-position:50% 36%}
  .op-destaque{max-width:12em;font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .op-acoes{gap:14px 22px}
  .op-acoes .wf-botao{width:100%;justify-content:center;height:56px}
  .op-acoes .wf-segunda{display:inline-flex;align-items:center;min-height:48px;padding:0}
}
@media (min-width:600px) and (max-width:820px){
  .op-acoes .wf-botao{width:auto}
  .op-item,.op-item--mama{grid-template-columns:48px minmax(0,1fr) minmax(0,1.3fr)}
  .op-nome,.op-item--mama .op-nome{grid-column:2}
  .op-corpo,.op-item--mama .op-corpo{grid-column:3;grid-row:1 / span 2}
  .op-foto--protese{grid-column:2;grid-row:2;width:200px;justify-self:start;margin:8px 0 0}
  .op-nota{grid-column:3}
}