/* =========================================================
   V2 — SEÇÕES NOVAS E AJUSTES PONTUAIS
   1) Vídeos (3 cards + destaque)
   2) Marquee visual (2 fileiras)
   3) Modal Capa / Tapete / Combo
   4) Notificação flutuante menor
   Carregar sempre DEPOIS de css/style.css e css/tapetes.css.
========================================================= */

/* =========================================================
   1) VÍDEOS — VEJA NA PRÁTICA (3 cards)
========================================================= */

.vPlay{
  padding: 44px 0 24px;
  background: #FAFBFC;
}

.vPlay__wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

.vPlay__title{
  font-size: clamp(22px, 5.4vw, 30px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  color: #0B0F14;
  position: relative;
  padding-bottom: 12px;
}

.vPlay__title::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: #F5B301;
}

.vPlay__sub{
  margin-top: 10px;
  margin-bottom: 18px;
  text-align: center;
  font-size: 14px;
  color: #5B6472;
}

/* mobile: scroll horizontal com snap */
.vPlay__row{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 74%);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vPlay__row::-webkit-scrollbar{ display: none; }

.vCard{
  margin: 0;
  scroll-snap-align: center;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(2,6,23,.07);
}

.vCard__media{
  position: relative;
  background: #0B0F14;
}

.vCard__video{
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 38%;
  background: #0B0F14;
  cursor: pointer;
}

.vCard__cap{
  padding: 12px 14px 14px;
}

.vCard__cap strong{
  display: block;
  font-size: 14.5px;
  font-weight: 900;
  color: #0B0F14;
}

.vCard__cap span{
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #5B6472;
}

/* desktop: 3 colunas fixas, sem scroll */
@media (min-width: 820px){
  .vPlay__row{
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    gap: 18px;
  }
}

@media (max-width: 400px){
  .vPlay{ padding: 32px 0 20px; }
  .vPlay__row{ grid-auto-columns: minmax(220px, 80%); }
}

/* =========================================================
   1b) VÍDEO SECUNDÁRIO EM DESTAQUE
========================================================= */

.vHero{
  padding: 44px 0 24px;
  background: #fff;
}

.vHero__wrap{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

.vHero__title{
  font-size: clamp(22px, 5.4vw, 30px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  color: #0B0F14;
  position: relative;
  padding-bottom: 12px;
}

.vHero__title::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: #F5B301;
}

.vHero__sub{
  margin-top: 10px;
  margin-bottom: 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  color: #5B6472;
}

.vHero__media{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  overflow: hidden;
  background: #0B0F14;
  box-shadow: 0 14px 34px rgba(2,6,23,.11);
}

.vHero__video{
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 78vh;
  object-fit: cover;
  background: #0B0F14;
  cursor: pointer;
}

@media (min-width: 720px){
  .vHero__video{ aspect-ratio: 4 / 5; }
}

@media (max-width: 400px){
  .vHero{ padding: 32px 0 20px; }
}

/* =========================================================
   2) MARQUEE VISUAL — 2 fileiras, sentidos opostos
========================================================= */

.vmq{
  padding: 26px 0;
  background: #0B0F14;
  overflow: hidden;
}

.vmq__row{
  overflow: hidden;
  width: 100%;
}

.vmq__row + .vmq__row{ margin-top: 10px; }

/* IMPORTANTE: o espaçamento vem de margin-right, NÃO de gap.
   Com gap, N itens têm N-1 espaços e metade da faixa não é um ciclo
   exato — o loop dá um salto visível ao reiniciar. Com margin-right
   cada item mede (largura + espaço), então translateX(-50%) fecha
   o ciclo perfeitamente. */
.vmq__track{
  display: flex;
  width: max-content;
  will-change: transform;
  --vmq-duration: 60s;
}

.vmq__track.is-running{
  animation: vmqScroll var(--vmq-duration) linear infinite;
}

.vmq__row--reverse .vmq__track.is-running{
  animation-direction: reverse;
}

.vmq__img{
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  margin-right: 10px;
  object-fit: cover;
  border-radius: 14px;
  background: #1B2028;
  display: block;
}

@keyframes vmqScroll{
  from{ transform: translate3d(0, 0, 0); }
  /* metade da faixa = 1 ciclo (o conjunto é duplicado pelo JS) */
  to  { transform: translate3d(-50%, 0, 0); }
}

@media (min-width: 760px){
  .vmq{ padding: 34px 0; }
  .vmq__img{ width: 190px; height: 190px; margin-right: 12px; border-radius: 16px; }
  .vmq__row + .vmq__row{ margin-top: 12px; }
}

@media (max-width: 400px){
  .vmq__img{ width: 128px; height: 128px; margin-right: 8px; border-radius: 12px; }
}

/* Acessibilidade: sem movimento contínuo, conteúdo continua visível */
@media (prefers-reduced-motion: reduce){
  .vmq__track,
  .vmq__track.is-running{
    animation: none !important;
    transform: none !important;
  }
  .vmq__row{
    overflow-x: auto;
    scrollbar-width: none;
  }
  .vmq__row::-webkit-scrollbar{ display: none; }
}

/* =========================================================
   3) MODAL — blocos Capa / Tapete / Combo
========================================================= */

.orderBlock[hidden],
.orderTotal[hidden],
.orderNotice[hidden]{ display: none !important; }

/* Título do produto só aparece quando há dois produtos na tela */
.orderBlock__title{
  display: none;
  margin: 4px 0 8px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #8a6400;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(245,179,1,.35);
}

.modal.is-combo .orderBlock__title{ display: block; }

.modal.is-combo #orderTapete{
  margin-top: 16px;
  padding-top: 4px;
}

.orderTotal{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(22,163,74,.10);
  border: 1px solid rgba(22,163,74,.28);
}

.orderTotal__label{
  font-size: 12.5px;
  font-weight: 800;
  color: #14532d;
}

.orderTotal__value{
  font-size: 19px;
  font-weight: 900;
  color: #15803d;
}

.orderNotice{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 700;
  color: #8a6400;
  background: #FFF8E6;
  border: 1px solid rgba(245,179,1,.40);
}

/* Lightbox sempre acima do modal (texturas são abertas de dentro dele) */
.txZoom{ z-index: 10050 !important; }

/* =========================================================
   4) NOTIFICAÇÃO FLUTUANTE — menor, sem perder legibilidade
========================================================= */

.macena-social-proof{
  max-width: 280px !important;
  padding: 9px 11px !important;
  gap: 8px !important;
  border-radius: 10px !important;
  left: 14px !important;
  right: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  z-index: 9000 !important;   /* abaixo do sticky CTA (9500) e do modal (9999) */
  box-shadow: 0 8px 22px rgba(0,0,0,.16) !important;
  transition: transform .28s ease, opacity .28s ease;
}

.macena-social-proof .sp-icon{
  width: 25px !important;
  height: 25px !important;
  font-size: 13px !important;
  flex: 0 0 auto !important;
}

.macena-social-proof .sp-text h4{
  font-size: 13px !important;
  line-height: 1.25 !important;
  color: #333 !important;
}

.macena-social-proof .sp-text p{
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #666 !important;
}

/* a linha "Há instantes" continua secundária */
.macena-social-proof .sp-text p[style]{
  font-size: 10.5px !important;
  color: #9AA3B0 !important;
}

/* telas estreitas: nunca ocupar quase toda a largura */
@media (max-width: 400px){
  .macena-social-proof{
    max-width: min(260px, calc(100vw - 96px)) !important;
    left: 12px !important;
  }
}

/* sobe quando o CTA fixo do mobile está visível */
html[data-sticky-visible] .macena-social-proof{
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
}

/* nunca por cima do modal de confirmação */
html[data-modal-open] .macena-social-proof{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce){
  .macena-social-proof{ transition: opacity .2s ease; }
}