/* =====================================================================
   HOME.CSS — Hero com "palco" (maior desconto do dia ao fundo + cards
   de vidro na frente), ticker, destaques, drops, como funciona.
   ===================================================================== */

/* ===================== HERO ===================== */
.hero{position:relative; padding:40px 0 8px; overflow:hidden;}
.hero-glow{
  position:absolute; left:50%; top:46%; width:min(1100px, 140vw); aspect-ratio:2/1; transform:translate(-50%,-10%);
  background:radial-gradient(closest-side, rgba(255,210,63,0.16), rgba(255,210,63,0.04) 55%, transparent 75%);
  pointer-events:none; filter:blur(10px);
}
.hero .container{position:relative;}
.hero-top{display:grid; gap:22px; align-items:end;}

.live-pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 10px;
  border:1px solid var(--color-border-strong); border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:500; color:var(--color-text-dim); background:rgba(255,255,255,0.03);
}
.live-dot{width:7px; height:7px; border-radius:50%; background:var(--color-success); box-shadow:0 0 0 0 rgba(61,220,151,0.6); animation:livePulse 2.2s infinite;}
@keyframes livePulse{ 0%{box-shadow:0 0 0 0 rgba(61,220,151,0.55);} 70%{box-shadow:0 0 0 8px rgba(61,220,151,0);} 100%{box-shadow:0 0 0 0 rgba(61,220,151,0);} }
#heroLiveCount b{color:var(--color-text); font-weight:600;}

.hero-title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(38px, 7.4vw, 108px); line-height:0.98; letter-spacing:-0.045em;
  margin-top:18px;
}
.ht-line{display:block; overflow:hidden; padding-bottom:0.06em;}
.ht-line > span{display:inline-block; animation:lineUp .9s var(--ease) both;}
.ht-line:nth-child(2) > span{animation-delay:.08s;}
@keyframes lineUp{ from{transform:translateY(105%);} to{transform:none;} }

.hero-side p{color:var(--color-text-dim); font-size:15.5px; line-height:1.6; max-width:46ch;}
.hero-ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;}
.hero-ctas .btn{flex:1 1 auto;}

/* ===================== PALCO ===================== */
.stage{
  --num-size: clamp(130px, 34vw, 400px);
  position:relative; margin-top:44px; padding-top:calc(var(--num-size) * 0.42);
}
.stage-number{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-weight:700; font-size:var(--num-size);
  line-height:0.82; letter-spacing:-0.07em; white-space:nowrap;
  background:linear-gradient(180deg, var(--color-primary) 0%, rgba(255,210,63,0.55) 45%, rgba(255,210,63,0) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  pointer-events:none; user-select:none;
  animation:numIn 1.2s var(--ease) .15s both;
}
@keyframes numIn{ from{opacity:0; transform:translateX(-50%) translateY(30px) scale(.96);} to{opacity:1; transform:translateX(-50%);} }

.stage-head{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.stage-label{font-size:13.5px; font-weight:500; color:var(--color-text); padding:6px 12px; border-radius:var(--radius-pill); background:rgba(6,6,7,0.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--glass-border);}

.stage-cards{
  position:relative; z-index:2;
  display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  margin:0 -20px; padding:4px 20px 30px;
}
.stage-cards::-webkit-scrollbar{display:none;}

.glass-card{
  scroll-snap-align:center; display:flex; flex-direction:column; min-width:0;
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-l);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  padding:10px; box-shadow:0 30px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  transition:transform .4s var(--ease), border-color .3s;
  animation:cardRise .9s var(--ease) both;
}
.glass-card:nth-child(1){animation-delay:.35s;}
.glass-card:nth-child(2){animation-delay:.45s;}
.glass-card:nth-child(3){animation-delay:.55s;}
@keyframes cardRise{ from{opacity:0; transform:translateY(40px);} to{opacity:1;} }
@media (hover:hover){ a.glass-card:hover{border-color:rgba(255,255,255,0.24); transform:translate3d(0,-6px,0);} }
.gc-media{position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:rgba(255,255,255,0.04);}
.gc-media img{width:100%; height:100%; object-fit:cover;}
.gc-media .badge-discount{position:absolute; top:10px; left:10px; font-size:13px;}
.gc-body{padding:14px 6px 6px; display:flex; flex-direction:column; gap:4px; flex:1;}
.gc-store{font-size:12px; color:var(--color-text-dim);}
.gc-body h3{font-size:15px; font-weight:500; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px;}
.gc-price{display:flex; align-items:baseline; gap:8px; margin:8px 0 14px; flex-wrap:wrap;}
.gc-price b{font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:-0.04em; font-variant-numeric:tabular-nums;}
.gc-price s{font-size:13px; color:var(--color-text-faint);}
.gc-body .btn{margin-top:auto;}
.glass-card.is-skeleton .gc-media, .glass-card .sk{background:linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite;}
.glass-card .sk{display:block; height:12px; border-radius:6px; margin-top:8px;}
.glass-card .sk.w-60{width:60%; height:22px; margin-bottom:40px;}

/* Selo giratório */
.seal{
  position:absolute; z-index:3; right:4px; top:-34px;
  width:96px; height:96px; border-radius:50%;
  background:rgba(6,6,7,0.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border); display:none; align-items:center; justify-content:center;
}
.seal-ring{position:absolute; inset:0; width:100%; height:100%; animation:spin 22s linear infinite;}
.seal-ring text{font-family:var(--font-display); font-size:10.5px; font-weight:500; letter-spacing:2.2px; fill:var(--color-text); text-transform:uppercase;}
.seal-mark{width:34px; height:34px;}
@keyframes spin{ to{transform:rotate(360deg);} }

/* Faixa de confiança */
.trust-row{display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; padding:18px 0 40px; border-top:1px solid var(--color-border); margin-top:6px;}
.trust-row li{display:flex; gap:10px; align-items:flex-start;}
.trust-row .material-symbols-outlined{font-size:22px; color:var(--color-primary); flex-shrink:0; margin-top:1px;}
.trust-row b{display:block; font-size:13.5px; font-weight:600;}
.trust-row div span{display:block; font-size:12.5px; color:var(--color-text-faint); line-height:1.45; margin-top:2px;}

/* ===================== TICKER ===================== */
.ticker-wrap{
  border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);
  overflow:hidden; position:relative; background:var(--color-surface);
}
.ticker-wrap::before, .ticker-wrap::after{content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;}
.ticker-wrap::before{left:0; background:linear-gradient(90deg, var(--color-surface), transparent);}
.ticker-wrap::after{right:0; background:linear-gradient(270deg, var(--color-surface), transparent);}
.ticker-track{display:flex; width:max-content; animation:ticker-scroll 40s linear infinite; will-change:transform;}
.ticker-wrap:hover .ticker-track{animation-play-state:paused;}
@keyframes ticker-scroll{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);} }
.ticker-item{display:flex; align-items:center; gap:10px; padding:13px 28px; font-size:13px; font-weight:500; color:var(--color-text-dim); white-space:nowrap; position:relative;}
.ticker-item::after{content:''; position:absolute; right:0; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--color-border-strong);}
.ticker-item b{color:var(--color-text); font-weight:600; font-variant-numeric:tabular-nums;}
.ticker-item .tk-drop{color:var(--color-primary); font-weight:600; font-family:var(--font-display); font-size:12px;}
.ticker-item .material-symbols-outlined{font-size:16px; color:var(--color-success);}

/* ===================== SEÇÕES ===================== */
.banner-section{padding-top:36px;}
/* Seções abaixo da dobra: o navegador só calcula/pinta quando chegam perto da tela. */
.how, #comunidade{content-visibility:auto; contain-intrinsic-size:auto 520px;}
.hero-copy{min-width:0;}
.products-section{padding-top:56px; padding-bottom:8px;}
.filters-bar{margin-bottom:12px;}
.search-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.search-row .search-box{flex:1 1 260px;}
.products-section .search-meta{margin:12px 0 18px;}
.drop-bolt{color:var(--color-info); font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; font-size:1em;}

/* ===================== COMO FUNCIONA ===================== */
.how{padding-top:72px; padding-bottom:16px;}
.how-steps{display:grid; gap:0; counter-reset:none; border-top:1px solid var(--color-border);}
.how-steps li{
  display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto auto; column-gap:16px;
  padding:22px 0; border-bottom:1px solid var(--color-border);
}
.how-num{
  grid-row:1 / span 2; font-family:var(--font-display); font-size:40px; font-weight:300; line-height:1;
  color:var(--color-primary); letter-spacing:-0.05em;
}
.how-steps h3{font-size:17px; font-weight:600; margin-bottom:4px;}
.how-steps p{color:var(--color-text-dim); font-size:14.5px; line-height:1.6; max-width:42ch;}

/* ===================== COMUNIDADE ===================== */
#comunidade{padding-top:64px; padding-bottom:24px;}
.community{
  position:relative; overflow:hidden; border-radius:var(--radius-l);
  background:var(--color-primary); color:var(--color-on-primary);
  padding:36px 24px; display:flex; flex-direction:column; gap:22px;
}
.community-mark{position:absolute; right:-60px; bottom:-70px; width:260px; height:260px; opacity:.18; filter:grayscale(1) brightness(0); transform:rotate(-14deg); pointer-events:none;}
.community-copy{position:relative;}
.community h2{font-family:var(--font-display); font-weight:600; font-size:clamp(26px, 4.4vw, 46px); line-height:1.02; letter-spacing:-0.04em; max-width:16ch;}
.community p{font-size:15px; line-height:1.55; margin-top:12px; max-width:44ch; color:rgba(10,10,11,0.72);}
.community-btn{position:relative; background:#0A0A0B; color:#fff; width:fit-content;}
.community-btn:hover{background:#000; box-shadow:0 12px 30px rgba(0,0,0,0.3);}
.community-btn:focus-visible{outline-color:#0A0A0B;}

/* ===================== RESPONSIVO ===================== */
@media (min-width:640px){
  .hero-ctas .btn{flex:0 0 auto;}
  .stage-cards{margin:0 -28px; padding:4px 28px 30px; grid-auto-columns:46%;}
  .seal{display:flex;}
  .trust-row{grid-template-columns:repeat(4, 1fr);}
  .community{padding:48px 44px;}
}
@media (min-width:900px){
  .hero{padding-top:56px;}
  .hero-side{display:flex; align-items:flex-end; justify-content:space-between; gap:40px;}
  .hero-side .hero-ctas{margin-top:0; flex-shrink:0;}
  .stage{margin-top:56px; padding-top:calc(var(--num-size) * 0.5);}
  .stage-cards{
    grid-auto-flow:row; grid-template-columns:repeat(3, 1fr); grid-auto-columns:auto;
    overflow:visible; margin:0; padding:0 0 40px; gap:18px;
  }
  .glass-card:nth-child(2){transform:translateY(-28px);}
  a.glass-card:nth-child(2):hover{transform:translateY(-34px);}
  .seal{width:120px; height:120px; right:-6px; top:-48px;}
  .seal-mark{width:40px; height:40px;}
  .how-steps{grid-template-columns:repeat(3, 1fr); border-top:none; gap:20px;}
  .how-steps li{display:block; padding:26px 0 0; border-bottom:none; border-top:1px solid var(--color-border-strong);}
  .how-num{display:block; font-size:56px; margin-bottom:22px;}
  .community{flex-direction:row; align-items:center; justify-content:space-between; padding:56px;}
}