/* ============================================================================
   CINEMA — o resto do site na mesma linguagem da abertura.
   Regra herdada das referencias: nada de card em grade, tipografia grande,
   fundo escuro, uma ideia por tela, movimento continuo ao rolar.
   ========================================================================== */

/* ---------- onde a venda trava: capitulos que se empilham ---------- */
.filme-travas{position:relative;background:#030303}
.travas-abre{min-height:76vh;display:grid;place-items:center;text-align:center;
  padding:clamp(4rem,12vh,9rem) 0}
.travas-abre h2{font-family:var(--serif);font-weight:500;color:var(--creme);letter-spacing:-.025em;
  font-size:clamp(34px,6.4vw,88px);line-height:.96}
.travas-abre h2 em{font-style:italic;color:var(--ouro-claro)}
.travas-abre p{margin-top:clamp(1rem,2.5vh,1.75rem);max-width:46ch;margin-inline:auto;
  color:var(--creme-2);font-size:clamp(15px,1.5vw,19px);line-height:1.6}

.cap{position:relative;height:88vh}
.cap-fixo{position:sticky;top:0;height:100dvh;display:grid;place-items:center;overflow:hidden;
  background:#030303;border-top:1px solid rgba(199,154,90,.14);
  padding:0 clamp(1.25rem,5vw,5.5rem)}
/* luz rasante: cada capitulo tem a sua, entrando de um lado */
.cap-fixo::before{content:"";position:absolute;left:-10%;top:50%;width:80vmax;height:80vmax;
  transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(199,154,90,.13),rgba(199,154,90,0) 62%)}
.cap:nth-child(even) .cap-fixo::before{left:auto;right:-10%}

.cap-num{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);z-index:0;
  font-family:var(--serif);font-weight:600;font-size:min(46vw,54vh);line-height:1;
  color:rgba(239,231,216,.07);letter-spacing:-.04em;user-select:none}
.cap-texto{position:relative;z-index:1;max-width:min(92vw,64rem);text-align:center}
.cap-olho{font-size:clamp(9.5px,1.05vw,11px);letter-spacing:.3em;text-transform:uppercase;
  color:var(--ouro);font-weight:600;margin-bottom:clamp(.9rem,2.2vh,1.5rem)}
.cap-texto h3{font-family:var(--serif);font-weight:500;color:var(--creme);letter-spacing:-.02em;
  font-size:clamp(36px,6.8vw,92px);line-height:.94;max-width:14ch;margin-inline:auto;text-wrap:balance}
.cap-corpo{margin-top:clamp(1rem,2.4vh,1.6rem);max-width:44ch;margin-inline:auto;
  color:var(--creme-2);font-size:clamp(14.5px,1.35vw,17.5px);line-height:1.62}

/* o capitulo entra e sai: o conteudo sobe enquanto a secao atravessa a tela */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .cap-texto{animation:capPassa linear both;animation-timeline:view();
      animation-range:entry 12% exit 88%}
    @keyframes capPassa{
      0%{opacity:0;transform:translateY(46px)}
      22%,74%{opacity:1;transform:none}
      100%{opacity:0;transform:translateY(-46px)}
    }
    .cap-num{animation:capNum linear both;animation-timeline:view();
      animation-range:entry 12% exit 88%}
    @keyframes capNum{
      0%{opacity:0;transform:translate(-50%,-46%) scale(.94)}
      24%,72%{opacity:1;transform:translate(-50%,-54%) scale(1)}
      100%{opacity:0;transform:translate(-50%,-62%) scale(1.06)}
    }
  }
}

.travas-fecha{padding:clamp(4.5rem,13vh,9rem) 0;text-align:center;background:#030303;
  border-top:1px solid rgba(199,154,90,.14)}
.travas-fecha p{font-family:var(--serif);font-size:clamp(23px,3.4vw,44px);color:var(--creme);
  line-height:1.15;max-width:22ch;margin:0 auto clamp(1.5rem,3.5vh,2.5rem)}

/* ---------- cabeca grande, para as secoes de conteudo ---------- */
.cabeca.grande h2{font-family:var(--serif);font-weight:500;letter-spacing:-.025em;
  font-size:clamp(32px,5.6vw,76px);line-height:.98;color:var(--creme)}
.cabeca.grande h2 em{font-style:italic;color:var(--ouro-claro)}
.cabeca.grande p{margin-top:1rem;max-width:48ch;color:var(--creme-2);
  font-size:clamp(15px,1.45vw,18px);line-height:1.6}
.secao.cinema .wrap{padding-block:clamp(4.5rem,12vh,8.5rem)}

/* ---------- o que a Gogh faz: linhas, nao cards ---------- */
.linhas{list-style:none;padding:0;margin:clamp(2.5rem,7vh,4.5rem) 0 0;display:flex;flex-direction:column}
.linha{position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1rem,3vw,3rem) clamp(1.2rem,3.4vw,3.4rem);align-items:baseline;
  padding:clamp(1.6rem,4vh,2.8rem) 0;border-top:1px solid var(--fio)}
.linha:last-child{border-bottom:1px solid var(--fio)}
/* o fio de ouro corre sob a linha quando ela entra */
.linha::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--ouro);box-shadow:0 0 12px rgba(199,154,90,.75)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .linha::after{animation:fioCorre linear both;animation-timeline:view();animation-range:entry 22% cover 42%}
    @keyframes fioCorre{from{width:0}to{width:100%}}
  }
}
.linha-n{font-family:var(--serif);font-size:clamp(15px,1.5vw,19px);color:var(--ouro);
  font-weight:600;letter-spacing:.04em}
.linha h3{grid-column:2;font-family:var(--serif);font-weight:500;color:var(--creme);
  font-size:clamp(28px,4.2vw,58px);line-height:1;letter-spacing:-.02em}
.linha p{grid-column:2;margin-top:.6rem;max-width:56ch;color:var(--creme-2);
  font-size:clamp(14.5px,1.3vw,17px);line-height:1.62}

/* ---------- como funciona: o fio que se desenha ---------- */
.trilha{list-style:none;padding:0;margin:clamp(2.5rem,7vh,4.5rem) 0 0;position:relative;
  display:flex;flex-direction:column;gap:clamp(2rem,5.5vh,3.6rem)}
.trilha::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,rgba(199,154,90,.5),rgba(199,154,90,.08))}
.trilha li{position:relative;padding-left:clamp(2.2rem,4vw,3.4rem)}
.marco{position:absolute;left:0;top:7px;width:11px;height:11px;border-radius:50%;
  background:#030303;border:1px solid var(--ouro);box-shadow:0 0 0 4px #030303,0 0 16px rgba(199,154,90,.5)}
.trilha h3{font-family:var(--serif);font-weight:500;color:var(--creme);
  font-size:clamp(24px,3.2vw,40px);line-height:1.05;letter-spacing:-.015em}
.trilha p{margin-top:.55rem;max-width:56ch;color:var(--creme-2);
  font-size:clamp(14.5px,1.3vw,17px);line-height:1.62}

/* ---------- o que voce pode cobrar ---------- */
.promessas{list-style:none;padding:0;margin:clamp(2.5rem,7vh,4.5rem) 0 0;
  display:flex;flex-direction:column;gap:clamp(1.8rem,5vh,3.2rem)}
.promessas li{display:grid;gap:.6rem;padding-left:clamp(1.1rem,2.4vw,2rem);
  border-left:1px solid rgba(199,154,90,.32)}
.promessas strong{font-family:var(--serif);font-weight:500;color:var(--creme);
  font-size:clamp(22px,3vw,38px);line-height:1.06;letter-spacing:-.015em}
.promessas span{max-width:58ch;color:var(--creme-2);font-size:clamp(14.5px,1.3vw,17px);line-height:1.62}

/* ---------- fecho: o campo volta ---------- */
.final-filme{position:relative;min-height:100dvh;display:grid;place-items:center;
  background:#030303;overflow:hidden;text-align:center;padding:clamp(5rem,14vh,9rem) clamp(1.25rem,5vw,4rem)}
.campo-fim{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.final-filme::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(105% 78% at 50% 50%,rgba(3,3,3,0) 28%,rgba(3,3,3,.8) 100%)}
.fim-conteudo{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.2rem,3vh,2rem)}
.fim-conteudo h2{font-family:var(--serif);font-weight:500;color:var(--creme);letter-spacing:-.025em;
  font-size:clamp(36px,7vw,104px);line-height:.94;text-shadow:0 12px 50px rgba(0,0,0,.9)}
.fim-conteudo h2 em{font-style:italic;color:var(--ouro-claro)}
.fim-conteudo>p{max-width:46ch;color:var(--creme-2);font-size:clamp(15px,1.5vw,19px);line-height:1.6}
.final-filme .contatos{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,3vw,2.2rem);
  margin-top:.5rem}
.final-filme .contatos a{color:var(--creme-2);font-size:14px;letter-spacing:.06em;
  text-decoration:none;border-bottom:1px solid rgba(199,154,90,.3);padding-bottom:2px}
.final-filme .contatos a:hover{color:var(--ouro-claro)}

@media(max-width:860px){
  .cap{height:86vh}
  .cap-num{font-size:min(74vw,40vh)}
  .cap-texto{max-width:none}
  .linha{grid-template-columns:1fr;gap:.35rem}
  .linha h3,.linha p{grid-column:1}
  .linha-n{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .cap{height:auto}
  .cap-fixo{position:relative;height:auto;padding-block:clamp(3.5rem,9vh,5rem)}
  .cap-num{display:none}
  .final-filme{min-height:auto}
  .campo-fim{display:none}
}