/* ============================================================
   50 · ENTENDA O TRATAMENTO — etapas + palco 3D com o modelo acrílico
   ============================================================ */
.entenda{padding:0;background:
  radial-gradient(45% 50% at 72% 50%,rgba(210,190,90,.16),transparent 70%),
  linear-gradient(180deg,var(--verde-950),var(--verde-900))}
.entenda__pin{min-height:100svh;display:flex;align-items:center;padding-block:clamp(3rem,8vh,5rem)}
.entenda__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.entenda .cabecalho-secao{margin-bottom:1.2rem}
.entenda__barra{height:2px;background:rgba(210,190,90,.18);border-radius:99px;overflow:hidden;margin:.4rem 0 1.4rem}
.entenda__barra i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--ouro-escuro),var(--ouro-brilho));transform:scaleX(.25);transform-origin:left;transition:transform .6s var(--ease-suave,ease)}
.entenda__etapas{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.entenda__etapa{display:grid;grid-template-columns:2.6rem 1fr;gap:.6rem;align-items:start;padding:.75rem .9rem;border-radius:var(--raio-sm,14px);
  border:1px solid transparent;transition:background .4s,border-color .4s,opacity .4s;opacity:.55}
.entenda__etapa.is-ativa{opacity:1;background:rgba(255,255,255,.05);border-color:rgba(210,190,90,.35)}
.entenda__n{font-family:var(--fonte-display);font-weight:300;font-size:1.25rem;letter-spacing:.06em;color:var(--ouro);line-height:1.2}
.entenda__etapa .h3{font-size:.86rem;letter-spacing:.1em;color:var(--marfim);margin:.15rem 0 .3rem}
.entenda__etapa p{margin:0;font-size:.92rem;line-height:1.55;color:var(--salvia-claro)}
.entenda__foto-mob{display:none;grid-column:1/-1;margin:.6rem 0 0;padding:1rem;border-radius:var(--raio-sm,14px);background:radial-gradient(60% 60% at 50% 50%,rgba(210,190,90,.14),transparent 75%)}
.entenda__foto-mob img{display:block;max-height:280px;width:auto;max-width:100%;margin:0 auto;filter:drop-shadow(0 14px 20px rgba(0,0,0,.4))}
.entenda__legenda{margin:1.2rem 0 0;font-size:.74rem;letter-spacing:.06em;color:rgba(169,192,174,.75)}

/* ----- palco ----- */
.entenda__palco{position:relative;height:min(70vh,640px);min-height:380px;perspective:1300px;transform-style:preserve-3d}
.entenda__anel{position:absolute;left:50%;top:50%;width:min(88%,520px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(210,190,90,.35);transform:translate(-50%,-50%) rotateX(68deg);box-shadow:0 0 60px rgba(210,190,90,.12) inset}
.entenda__anel--2{width:min(64%,380px);border-color:rgba(210,190,90,.55);transform:translate(-50%,-50%) rotateX(68deg) rotateZ(30deg)}
html.anim .entenda__anel{animation:entenda-anel 14s linear infinite}
html.anim .entenda__anel--2{animation-duration:9s;animation-direction:reverse}
@keyframes entenda-anel{to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(360deg)}}
.entenda__foto{position:absolute;inset:0;margin:0;display:grid;place-items:center;transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .7s ease;will-change:transform,opacity}
.entenda__foto.is-antes{transform:translateX(-30%) rotateY(-48deg) translateZ(-160px) scale(.72);opacity:0}
.entenda__foto.is-depois{transform:translateX(30%) rotateY(48deg) translateZ(-160px) scale(.72);opacity:0}
.entenda__foto.is-ativa{transform:none;opacity:1}
.entenda__quadro{position:relative;display:inline-block;max-height:100%}
.entenda__quadro img{display:block;max-height:min(62vh,560px);width:auto;max-width:100%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
html.anim .entenda__foto.is-ativa .entenda__quadro{animation:entenda-flutua 6s ease-in-out infinite}
@keyframes entenda-flutua{50%{transform:translateY(-12px) rotate(1deg)}}
.entenda__marca{position:absolute;left:var(--x,50%);top:var(--y,50%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:var(--ouro);box-shadow:0 0 0 3px rgba(15,28,18,.6),0 0 0 0 rgba(210,190,90,.7);opacity:0;transition:opacity .5s .5s}
.entenda__foto.is-ativa .entenda__marca{opacity:1}
html.anim .entenda__foto.is-ativa .entenda__marca{animation:entenda-ping 1.8s ease-out infinite .6s}
@keyframes entenda-ping{0%{box-shadow:0 0 0 3px rgba(15,28,18,.6),0 0 0 0 rgba(210,190,90,.7)}100%{box-shadow:0 0 0 3px rgba(15,28,18,.6),0 0 0 22px rgba(210,190,90,0)}}

/* ----- tela baixa (notebook): tudo que está pinado precisa caber em 100vh ----- */
@media (min-width:761px) and (max-height:780px){
  .entenda__pin{padding-block:1.2rem}
  .entenda .cabecalho-secao{margin-bottom:.5rem}
  .entenda .h2--sm{font-size:clamp(1.3rem,2.4vw,1.9rem)}
  .entenda .lead{font-size:.9rem;margin-bottom:.4rem}
  .entenda__barra{margin:.3rem 0 .8rem}
  .entenda__etapas{gap:.25rem}
  .entenda__etapa{padding:.45rem .75rem}
  .entenda__etapa p{font-size:.84rem;line-height:1.45}
  .entenda__n{font-size:1rem}
  .entenda__legenda{margin-top:.6rem;font-size:.68rem}
  .entenda__palco{height:min(66vh,540px);min-height:280px}
  .entenda__quadro img{max-height:min(58vh,460px)}
}

/* ----- modo estático (mobile ou ?anim=0): lista com foto em cada etapa ----- */
.entenda.is-estatica .entenda__palco,.entenda.is-estatica .entenda__barra{display:none}
.entenda.is-estatica .entenda__grid{grid-template-columns:1fr}
.entenda.is-estatica .entenda__pin{min-height:0}
.entenda.is-estatica .entenda__etapa{opacity:1;background:rgba(255,255,255,.04);border-color:rgba(210,190,90,.25)}
.entenda.is-estatica .entenda__foto-mob{display:block}
/* mobile pinado: palco em cima, só a etapa ativa embaixo (as outras trocam com o scroll) */
@media (max-width:760px){
  .entenda__grid{grid-template-columns:1fr;gap:.6rem;align-items:start}
  .entenda__pin{min-height:100svh;padding-block:calc(var(--nav-h,68px) + .8rem) 1.2rem;align-items:flex-start}
  .entenda__copy{display:contents}
  .entenda .cabecalho-secao{order:1;margin-bottom:.2rem}
  .entenda .h2--sm{font-size:clamp(1.35rem,6vw,1.8rem)}
  .entenda .lead{display:none}
  .entenda__palco{order:2;height:min(40vh,340px);min-height:220px}
  .entenda__anel{width:min(96%,300px)}
  .entenda__anel--2{width:min(70%,220px)}
  .entenda__quadro img{max-height:min(36vh,300px)}
  .entenda__barra{order:3;margin:.2rem 0 .5rem}
  .entenda__etapas{order:4;gap:0}
  .entenda__etapa{opacity:1;background:rgba(255,255,255,.05);border-color:rgba(210,190,90,.35);padding:.7rem .8rem .8rem;transition:none}
  .entenda__etapa:not(.is-ativa){display:none}
  .entenda__etapa p{font-size:.88rem}
  .entenda__legenda{order:5;margin-top:.5rem;font-size:.66rem}
  html.anim .entenda__foto.is-ativa .entenda__quadro{animation:none}
  .entenda__quadro img{filter:drop-shadow(0 16px 20px rgba(0,0,0,.4))}
  /* ?anim=0 no celular: lista completa com foto em cada etapa */
  .entenda.is-estatica .entenda__pin{min-height:0;padding-block:3rem}
  .entenda.is-estatica .entenda__etapa:not(.is-ativa){display:grid}
  .entenda.is-estatica .entenda__etapas{gap:.5rem}
}