/* ============================================================================
   CRO — escassez, prova social e creators.
   Usa os tokens da lander (--plum, --berry, --red...), definidos em styles.css.
   ========================================================================== */

/* mount desligado ou sem conteudo nao pode ocupar espaco (a .section tem padding) */
[data-cro]:empty{display:none !important}

/* ------------------------------------------------------------- escassez -- */
.cro-stock{
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--berry);
  border-radius:var(--r-md); padding:13px 15px; margin-top:14px;
}
.cro-stock__row{display:flex; align-items:center; gap:9px; margin-bottom:9px}
.cro-stock__dot{
  width:8px; height:8px; border-radius:50%; background:var(--berry); flex:0 0 8px;
  box-shadow:0 0 0 0 rgba(178,68,104,.55); animation:cro-pulse 2.2s infinite;
}
@keyframes cro-pulse{
  70%{box-shadow:0 0 0 9px rgba(178,68,104,0)}
  100%{box-shadow:0 0 0 0 rgba(178,68,104,0)}
}
.cro-stock__label{font-size:14px; font-weight:700; color:var(--plum)}
.cro-stock__track{height:6px; border-radius:var(--r-pill); background:var(--cream-2); overflow:hidden}
.cro-stock__fill{
  display:block; height:100%; border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--berry), var(--jelly));
  transition:width .5s ease;
}
.cro-stock__sub{margin:9px 0 0; font-size:11.5px; color:var(--ink-3); line-height:1.5}

.cro-stock.is-low{border-left-color:var(--red)}
.cro-stock.is-low .cro-stock__dot{background:var(--red); box-shadow:0 0 0 0 rgba(216,30,42,.55); animation-name:cro-pulse-red}
@keyframes cro-pulse-red{
  70%{box-shadow:0 0 0 9px rgba(216,30,42,0)}
  100%{box-shadow:0 0 0 0 rgba(216,30,42,0)}
}
.cro-stock.is-low .cro-stock__label{color:var(--red)}
.cro-stock.is-low .cro-stock__fill{background:linear-gradient(90deg, var(--red), #F5A3A8)}

@media (prefers-reduced-motion:reduce){
  .cro-stock__dot{animation:none}
  .cro-stock__fill{transition:none}
}

/* --------------------------------------------------------- prova social -- */
.cro-pop{
  position:fixed; left:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:35;
  display:flex; align-items:center; gap:11px;
  width:min(330px, calc(100vw - 28px));
  padding:10px 12px; border-radius:var(--r-md);
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border:1px solid var(--line); box-shadow:0 8px 28px rgba(70,32,58,.16);
  transform:translateY(130%); opacity:0; pointer-events:none;
  transition:transform .42s cubic-bezier(.2,.8,.3,1), opacity .3s;
}
.cro-pop.is-on{transform:none; opacity:1; pointer-events:auto}
.cro-pop__img{width:44px; height:55px; object-fit:cover; border-radius:var(--r-sm); flex:0 0 44px}
.cro-pop__txt{min-width:0; flex:1}
.cro-pop__line{margin:0; font-size:12.5px; line-height:1.4; color:var(--ink-2)}
.cro-pop__line strong{color:var(--ink); font-weight:600}
.cro-pop__meta{margin:3px 0 0; font-size:11px; color:var(--ink-3)}
.cro-pop__ok{color:var(--good); font-weight:600}
.cro-pop__x{
  position:absolute; top:5px; right:7px; width:22px; height:22px;
  border:0; background:none; color:var(--ink-3); font-size:16px; line-height:1;
  border-radius:50%;
}
.cro-pop__x:hover{background:var(--cream-2); color:var(--ink)}

/* no mobile a barra fixa de compra ocupa o rodapé — sobe o popup */
@media (max-width:899px){
  .cro-pop{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .cro-pop{transition:opacity .3s}
}

/* -------------------------------------------------------------- creators -- */
.cro-ugc{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,1fr);
  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; scrollbar-width:none;
}
.cro-ugc::-webkit-scrollbar{display:none}
.cro-ugc__card{
  scroll-snap-align:start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-s);
}
.cro-ugc__media{position:relative; aspect-ratio:9/16; background:var(--cream-2); cursor:pointer}
.cro-ugc__media video,
.cro-ugc__media img{width:100%; height:100%; object-fit:cover; display:block}
.cro-ugc__sound{
  position:absolute; right:10px; bottom:10px; z-index:2;
  border:0; border-radius:var(--r-pill); padding:6px 12px;
  background:rgba(36,26,34,.62); color:#fff; font-size:11.5px; font-weight:600;
  backdrop-filter:blur(6px);
}
.cro-ugc__foot{padding:14px 15px 16px}
.cro-ugc__who{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.cro-ugc__who strong{font-size:13.5px; color:var(--plum)}
.cro-ugc__who span{font-size:11.5px; color:var(--ink-3)}
.cro-ugc__quote{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.5}

@media (min-width:900px){
  .cro-ugc{grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible; gap:20px}
}