/* ==========================================================================
   CARROSSEL DOS KITS NA CAPA

   Arquivo separado de propósito: assim o style.css não precisa ser
   tocado, e nada do que já está no ar corre risco de ser desfeito.

   Gira sozinho, só com CSS. São 3 slides num ciclo de 15 segundos —
   cada um aparece por 5, com uma passagem suave entre eles. Sem
   JavaScript: se qualquer script da página falhar, o carrossel
   continua girando.
   ========================================================================== */

.vitrine--carrossel .giro{
  position:relative; z-index:3;
  /* altura fixa para os slides se sobreporem sem a página "pular".
     Um pouco menor que antes para abrir espaço ao selo acima. */
  height:min(470px,50vh);
}

.vitrine--carrossel .giro__slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  animation:giroFoto 15s infinite;
}

/* as fotos dos kits são recortadas (fundo transparente), então herdam
   a mesma sombra e o mesmo flutuar da garrafa que ficava aqui antes */
.vitrine--carrossel .giro__slide .vitrine__garrafa{
  max-height:100%; width:auto;
  animation:flutuar 7s ease-in-out infinite;
}

/* --------------------------------------------------- legendas girando
   Mesmo ritmo das fotos, para texto e imagem nunca saírem de sincronia. */
.vitrine--carrossel .giro__textos{
  position:relative;
  min-height:3.4rem;      /* segura o espaço e evita o botão dançar */
  width:100%;
}
.vitrine--carrossel .giro__texto{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  opacity:0;
  animation:giroFoto 15s infinite;
}

/* o atraso de cada slide: 0s, 5s e 10s dentro do ciclo de 15 */
.vitrine--carrossel .giro__slide--1{ animation-delay:0s; }
.vitrine--carrossel .giro__slide--2{ animation-delay:5s; }
.vitrine--carrossel .giro__slide--3{ animation-delay:10s; }

/* O slide que sai só começa a desaparecer DEPOIS que o próximo já está
   no lugar (33,33% = os 5 segundos de cada um). Como o próximo vem
   depois no HTML, ele cobre o anterior — a troca fica limpa, sem nenhum
   instante com a área vazia.                                         */
@keyframes giroFoto{
  0%      { opacity:1; }
  33.33%  { opacity:1; }
  36%     { opacity:0; }
  100%    { opacity:0; }
}

/* ------------------------------------------------------------- botão
   Sem preço: um kit por vez tem preço diferente, e mostrar o valor de
   um só confundiria. O botão leva direto para a loja.               */
.vitrine__preco--simples{
  grid-template-columns:none !important;
  padding:.8rem 2.2rem;
}
.vitrine__preco--simples .vitrine__preco-acao{
  font-size:.8rem; letter-spacing:.18em;
}

/* Quem prefere menos animação no sistema vê o primeiro kit parado,
   em vez de imagens piscando. */
@media (prefers-reduced-motion: reduce){
  .vitrine--carrossel .giro__slide,
  .vitrine--carrossel .giro__texto{ animation:none; }
  .vitrine--carrossel .giro__slide--1,
  .vitrine--carrossel .giro__texto.giro__slide--1{ opacity:1; }
  .vitrine--carrossel .giro__slide .vitrine__garrafa{ animation:none; }
}

@media (max-width: 720px){
  .vitrine--carrossel .giro{ height:min(400px,46vh); }
}

/* ---------------------------------------------------------- selo
   Fica ACIMA das fotos, com espaço só dele — assim nunca tampa a
   garrafa. Levemente inclinado, para parecer etiqueta colada.      */
.vitrine--carrossel .giro__selo{
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  width:max-content; margin:0 auto 1rem;
  transform:rotate(-2deg);
  background:var(--vinho); color:var(--sol);
  padding:.85rem 2rem; border-radius:4px;
  border:2px solid var(--sol); outline:3px solid var(--vinho);
  box-shadow:0 10px 26px rgba(74,14,17,.42);
  white-space:nowrap; pointer-events:none; text-align:center;
}
.vitrine--carrossel .giro__selo strong{
  font-size:1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  line-height:1.1;
}
/* a segunda linha é a que cria urgência: número pequeno, fechado */
.vitrine--carrossel .giro__selo em{
  font-style:normal; font-size:.68rem; font-weight:500; letter-spacing:.1em;
  opacity:.9;
}
@media (max-width: 720px){
  .vitrine--carrossel .giro__selo{ padding:.6rem 1.15rem; margin-bottom:.7rem; }
  .vitrine--carrossel .giro__selo strong{ font-size:.78rem; letter-spacing:.1em; }
  .vitrine--carrossel .giro__selo em{ font-size:.6rem; }
}

/* A marca d'água do rótulo ao fundo foi desenhada para UMA garrafa.
   Com as fotos recortadas ela aparece pelos vãos entre as três, então
   entra mais discreta aqui — sem sumir, só sem disputar atenção.   */
.vitrine--carrossel .vitrine__rotulo{ opacity:.12; }