/* Giro 360°: a prancha do fim da página do produto. Só a manchete e o filme —
   o arco em cima e a dissolvida embaixo são os mesmos recursos da .story-main-photo
   e dos cartões de linha, para a seção nascer parecida com o resto do site. */
.giro{padding-bottom:clamp(20px,3vw,44px);scroll-margin-top:100px}
.giro-grid{display:grid;grid-template-columns:.95fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;border-top:1px solid var(--color-border);padding-top:clamp(48px,7vw,96px)}
.giro-titulo{font-size:clamp(38px,5.2vw,78px);line-height:1;letter-spacing:-.055em;max-width:12ch}
.giro-titulo em{font-style:normal;color:#91846c}
.giro-figure{width:100%;max-width:560px;justify-self:end;margin:0}
.giro-stage{position:relative;isolation:isolate}
/* Halo quente atrás do arco, o mesmo recurso da .case-halo em sobre. */
.giro-halo{position:absolute;inset:-8% -7% 2%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse at 50% 48%,#e5dccd,transparent 70%)}
/* Arco em cima e dissolvida embaixo: o filme termina no papel em vez de bater
   numa borda reta. A máscara come os últimos 22% da altura, onde o fundo de
   estúdio já não tem produto — por isso ela começa depois das rodas. */
.giro-plate{position:relative;aspect-ratio:1;border-radius:46% 46% 30px 30px;overflow:hidden;background:#ebe8e2;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 98%);mask-image:linear-gradient(to bottom,#000 78%,transparent 98%)}
.giro-plate video{display:block;width:100%;height:100%;object-fit:cover}
/* O botão mora fora da prancha: dentro dela a máscara o apagaria junto com o pé do filme. */
.giro-controle{position:absolute;right:30px;bottom:6px;z-index:2;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--color-border);border-radius:50%;background:#fffffff2;color:var(--color-dark);font-size:16px;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s,background .35s,color .35s}
.giro-stage:hover .giro-controle,.giro-controle:focus-visible{opacity:1;transform:none}
.giro-controle:hover{background:var(--color-dark);color:#fff;border-color:var(--color-dark)}
@media(max-width:899px){.giro-grid{grid-template-columns:1fr;gap:18px}.giro-titulo{max-width:14ch}.giro-figure{max-width:none;justify-self:stretch}}
@media(max-width:767px){.giro{padding-bottom:12px}.giro-grid{padding-top:40px}.giro-plate{border-radius:46% 46% 22px 22px}.giro-controle{opacity:1;transform:none;width:38px;height:38px;right:18px}}
@media(prefers-reduced-motion:reduce){.giro-controle{transition:none;opacity:1;transform:none}}