/* ---- Filme de scroll (site/film.css) ------------------------------------
   A seção é alta (--film-height) e o palco fica preso (sticky) na viewport.
   O canvas desenha o quadro do scroll; as legendas aparecem por faixa. */
.film{position:relative;height:var(--film-height,520vh);background:#150C09;color:#F9F5F2}
.film__stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#150C09}
.film__canvas,.film__poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.film__poster{object-fit:cover;object-position:center;opacity:0;transition:opacity .5s ease}
.film--loading .film__poster,.film--static .film__poster{opacity:1}
.film--static .film__canvas{display:none}
.film__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#150C09 0%,rgba(21,12,9,.85) 10%,rgba(21,12,9,0) 30%,rgba(21,12,9,0) 58%,rgba(21,12,9,.78) 100%)}
.film__grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.9) .6px,transparent .7px);background-size:3px 3px}

/* Legendas: posição fixa no palco, opacidade controlada pelo JS. */
.film__caption{position:absolute;left:0;right:0;bottom:12vh;padding:0 24px;text-align:center;opacity:0;
  transform:translateY(18px);pointer-events:none;will-change:opacity,transform}
.film__caption.is-on{pointer-events:auto}
.film__caption > p{margin:0 auto;max-width:34ch;font-family:'Fashion',serif;font-weight:400;
  font-size:clamp(28px,4.2vw,56px);line-height:1.06;color:#F9F5F2;text-wrap:balance}
.film__caption > small{display:block;margin-top:14px;font-family:'Unbounded',sans-serif;font-weight:300;
  font-size:clamp(12px,1.1vw,15px);letter-spacing:.02em;color:rgba(249,245,242,.72)}
.film__kicker{display:block;margin-bottom:16px;font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent,#C7A275)}

/* Legenda ancorada no topo (ato final: o ícone ocupa o centro) */
.film__caption--top{bottom:9vh}
@media (max-width:820px){.film__caption--top{bottom:auto;top:clamp(100px,14vh,150px)}}

/* Ato 1: o herói do site vive sobre o filme (título, badges, botões). */
.film__hero{bottom:auto;top:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 24px clamp(56px,9vh,110px);text-align:left}
.film__hero > div{width:100%;max-width:660px;margin:0 auto 0 max(0px,calc((100% - 1392px) / 2))}

/* Indicador de rolagem */
.film__hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:8px;font-family:'Unbounded',sans-serif;font-weight:300;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(219,203,184,.6);pointer-events:none;transition:opacity .4s}
.film__hint::after{content:"";width:1px;height:34px;background:linear-gradient(180deg,rgba(219,203,184,.7),transparent);
  animation:film-hint 2.2s ease-in-out infinite}
.film--end .film__hint,.film__caption.is-on ~ .film__hint{opacity:0}
@keyframes film-hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Estático (sem JS, sem manifesto, reduced-motion): poster + legendas empilhadas. */
.film--static{height:auto}
.film--static .film__stage{position:relative;height:auto;min-height:clamp(640px,88vh,920px)}
.film--static .film__caption{position:relative;opacity:1!important;transform:none!important;bottom:auto;
  padding:40px 24px;pointer-events:auto}
.film--static .film__hero{position:relative;height:auto;min-height:clamp(640px,88vh,920px);justify-content:flex-end}
.film--static .film__hint{display:none}
@media (prefers-reduced-motion:reduce){.film__hint::after{animation:none}}

@media (max-width:820px){
  .film{height:var(--film-height-mobile,380vh)}
  .film__caption{bottom:9vh}
  .film__veil{background:linear-gradient(180deg,rgba(21,12,9,.42) 0%,rgba(21,12,9,.12) 26%,rgba(21,12,9,.55) 52%,rgba(21,12,9,.9) 100%)}
  .film__hero{padding-bottom:64px}
}

/* ---- Tour da solução (telas reais do app) -------------------------------- */
.tour{margin-top:64px;display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(32px,6vw,96px);align-items:start;max-width:1120px;margin-left:auto;margin-right:auto}
.tour__device{position:sticky;top:clamp(84px,12vh,120px);display:flex;justify-content:center}
.device{position:relative;background:#0b0705;border:1px solid rgba(219,203,184,.16);box-shadow:0 40px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04)}
.device img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.device--phone{width:min(320px,78vw);aspect-ratio:390/844;border-radius:46px;padding:10px}
.device--phone img{border-radius:38px;position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px);opacity:0;transition:opacity .45s ease}
.device--phone img.is-on{opacity:1}
.device--phone::after{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:92px;height:26px;border-radius:999px;background:#0b0705;box-shadow:0 0 0 1px rgba(255,255,255,.03)}
.device--tablet{width:100%;aspect-ratio:1024/730;border-radius:28px;padding:12px}
.device--tablet img{border-radius:18px}
.device--small{border-radius:18px;padding:7px}
.device--small img{border-radius:12px}
.tour__steps{list-style:none;margin:0;padding:clamp(10vh,20vh,26vh) 0 clamp(10vh,20vh,26vh);display:flex;flex-direction:column;gap:clamp(28vh,38vh,46vh)}
.tour__step{max-width:46ch;opacity:.38;transition:opacity .5s ease}
.tour__step.is-active{opacity:1}
.tour__num{display:block;font-family:'Fashion',serif;font-size:52px;line-height:.8;color:#DBCBB8;opacity:.55;margin-bottom:18px}
.tour__step h3{font-family:'Unbounded',sans-serif;font-weight:500;font-size:clamp(20px,2.2vw,26px);color:#F9F5F2;letter-spacing:-.01em;line-height:1.2}
.tour__step p{margin-top:12px;font-size:15px;font-weight:300;line-height:1.7;color:rgba(249,245,242,.72)}
.tour__tablet{margin-top:clamp(80px,10vw,140px);display:grid;gap:40px;max-width:1120px;margin-left:auto;margin-right:auto}
.tour__gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:0}
.tour__gallery figure{margin:0}
.tour__gallery figcaption{margin-top:12px;font-size:12.5px;font-weight:300;color:rgba(219,203,184,.72);text-align:center}
.tour__gallery .device--small{position:relative}
@media (max-width:899.98px){
  .tour{display:block;margin-top:48px}
  .tour__device{position:sticky;top:76px;z-index:2;padding:12px 0 22px;background:linear-gradient(180deg,#1d0f0b 0%,#1d0f0b 82%,rgba(29,15,11,0) 100%)}
  .device--phone{width:min(186px,50vw);border-radius:30px;padding:7px}
  .device--phone img{border-radius:24px;top:7px;left:7px;width:calc(100% - 14px);height:calc(100% - 14px)}
  .device--phone::after{width:60px;height:16px;top:12px}
  .tour__steps{padding:6vh 0 10vh;gap:26vh}
  .tour__step{opacity:.55;text-align:center;margin:0 auto}
  .tour__num{margin-left:auto;margin-right:auto;font-size:40px}
}
}

/* Desktop: véu lateral para a coluna do título (o quadro é deslocado à direita via data-shift). */
@media (min-width:900px){
  .film__veil{background:linear-gradient(90deg,rgba(21,12,9,.86) 0%,rgba(21,12,9,.62) 30%,rgba(21,12,9,.08) 56%,rgba(21,12,9,0) 70%),linear-gradient(180deg,#150C09 0%,rgba(21,12,9,.8) 12%,rgba(21,12,9,0) 30%,rgba(21,12,9,0) 62%,rgba(21,12,9,.72) 100%)}
}