/* =========================================================
   GOMMA WELL V32 — CARROSSEL DE CENAS: FAIXA TABLET (721–1100px)
   O layout original do carrossel (.product-story / .scene-*) só
   tinha regras para desktop (>1100px) e mobile (<=720px). Nessa
   faixa intermediária (ex.: 1024px e 768px) o rail vertical de
   navegação (.scene-rail) sobrepunha o texto do produto
   (.scene-copy-wrap), pois os dois disputavam o mesmo espaço à
   esquerda. Este arquivo reaproveita, para essa faixa, a mesma
   estratégia de empilhamento já usada no mobile — rail compacto
   no topo, texto abaixo, produto abaixo do texto — só que com
   proporções maiores, adequadas a telas de tablet.
   Carregado por último para vencer a cascata anterior. Todas as
   regras abaixo são específicas do carrossel de cenas.
   ========================================================= */

@media (max-width:1100px) and (min-width:721px){
  .product-story{height:340vh}
  .product-sticky{height:100svh}

  /* Rail vira uma barra compacta no topo (só os traços, sem o
     nome do produto por extenso) para não brigar de espaço com
     o texto — mesmo padrão do mobile, só reposicionado.
     top:82px porque o header fixo (.header, z-index:300) tem até
     ~69px de altura nesta faixa — abaixo de 82px o rail (z-index:20)
     fica sempre visível, nunca atrás do header. */
  .scene-rail{
    left:32px;right:32px;top:82px;
    transform:none;
    flex-direction:row;
    justify-content:center;
    gap:28px;
  }
  .scene-rail button{grid-template-columns:auto;gap:0;padding:9px 0;align-items:center}
  .scene-rail button b{display:none}
  .scene-rail button i{width:44px;height:3px;border-radius:99px}
  .scene-rail button.active i{width:64px}

  /* Texto ocupa a largura toda, abaixo do rail — sem disputar
     espaço horizontal com mais nada. */
  .scene-copy-wrap{
    left:36px;right:36px;top:132px;
    transform:none;
    width:auto;max-width:none;
    height:36%;overflow:visible;
  }
  .scene-copy{top:0;padding-right:0;transform:translateY(20px)}
  .scene-copy.active{transform:translateY(0)}
  .scene-copy.exit{transform:translateY(-20px)}
  .scene-copy h2{font-size:clamp(52px,9vw,86px);line-height:.84;margin-bottom:16px}
  .scene-copy>p:not(.eyebrow){font-size:16px;max-width:60ch}
  .scene-actions{margin-top:4px}

  /* Produto ocupa a faixa inferior, centralizado, abaixo do
     texto — mesma lógica do mobile. */
  .scene-stage{
    left:0;right:0;top:auto;bottom:2%;
    width:100%;height:40%;
  }
  .scene-product{height:90%}
  .scene-badge{right:32px;bottom:14px}
}