/* PROTÓTIPO (ramo prototipo-cinematico): "Como funciona" em cena renderizada com luz física.
   A seção fica presa na tela enquanto a rolagem toca os quadros (js/cine.js), como nos sites de produto 3D. */

.cine{position:relative;height:560svh;background:#06071a;color:#F1F3FF}
.cine-palco{position:sticky;top:0;height:100svh;overflow:hidden}
.cine-tela{position:absolute;inset:0;width:100%;height:100%;display:block}
.cine-palco::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,7,26,.88) 0%,rgba(6,7,26,.55) 28%,transparent 52%),linear-gradient(0deg,rgba(6,7,26,.6),transparent 22%)}

.cine-textos{position:absolute;inset:0;z-index:2;display:grid;align-items:center;pointer-events:none}
.cine-etapa{grid-area:1/1;max-width:430px;opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.cine-etapa.ativa{opacity:1;transform:none;pointer-events:auto}
.cine-n{font-size:.9rem;font-weight:600;color:var(--ciano-claro);margin-bottom:14px}
.cine-etapa h3{font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.035em;margin-bottom:16px}
.cine-etapa p{color:#BCC3EE;font-size:1.06rem}
.cine-titulo{font-size:clamp(2.2rem,4.4vw,4rem);letter-spacing:-.045em;line-height:1.02}
.cine-abertura{max-width:620px}
.cine-final .btn{margin-top:18px}

/* navegação vertical à direita (como a das latas) */
.cine-nav{position:absolute;right:max(20px,calc((100vw - 1200px) / 2));top:50%;transform:translateY(-50%);z-index:3;list-style:none;margin:0;padding:0;display:grid;gap:16px}
.cine-nav li{position:relative;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(190,200,255,.45);transition:background-color .3s,border-color .3s,transform .3s}
.cine-nav li.ativa{background:var(--ciano);border-color:var(--ciano);transform:scale(1.25);box-shadow:0 0 14px rgba(0,174,239,.8)}
.cine-nav span{position:absolute;right:24px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.8rem;color:#BCC3EE;opacity:0;transition:opacity .3s}
.cine-nav li.ativa span{opacity:1}

/* aviso discreto enquanto os quadros carregam */
.cine-carregando{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:4;background:rgba(255,255,255,.06)}
.cine-carregando i{display:block;height:100%;width:var(--carga,0%);background:var(--ciano);transition:width .3s}
.cine.pronto .cine-carregando{opacity:0;transition:opacity .6s}

/* a folha clara agora se divide em duas: antes e depois desta cena */
#o-que-fazemos.claro-ini{border-radius:clamp(28px,4vw,48px)}
#caso-tervox{border-radius:clamp(28px,4vw,48px) clamp(28px,4vw,48px) 0 0}

@media (max-width:760px){
  .cine{height:520svh}
  .cine-palco::after{background:linear-gradient(0deg,rgba(6,7,26,.95) 0%,rgba(6,7,26,.75) 34%,transparent 60%)}
  .cine-textos{align-items:end;padding-bottom:48px}
  .cine-nav{display:none}
  .cine-etapa h3{font-size:1.9rem}
  .cine-titulo{font-size:2.1rem}
}
@media (prefers-reduced-motion:reduce){.cine-etapa{transition:none}}