/* Página do grupo (becaia.com.br/grupo): DS Beça IA (roxo na abertura e no fechamento, areia no meio, mel só no desconto).
 * Tokens em tokens.css. Celular primeiro: é onde o link chega. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul, ol { margin: 0; }
p { text-wrap: pretty; } /* sem palavra sozinha na última linha */
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
h1, h2 { font-family: var(--font-display); text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3vw + 0.9rem, 2.1rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }

.envelope { width: 100%; max-width: 44rem; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- abertura (roxa) ---------- */

.topo {
  --color-focus: var(--areia-50);
  overflow: clip; /* a sombra do avatar não vaza pra seção de baixo */
  background:
    radial-gradient(80% 60% at 85% 0%, rgba(255, 255, 255, 0.14), transparent 70%),
    var(--roxo-600);
  color: var(--areia-50);
  padding: var(--space-lg) 0 var(--space-2xl);
}

/* tudo centralizado; no desktop o rosto do Beca (o logo) fica à direita da headline */
.marca { display: grid; justify-items: center; gap: var(--space-3xs); text-align: center; }
.marca__nome { font-family: var(--font-display); font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.02em; line-height: 1.15; }
.marca__tipo { font-size: var(--text-sm); color: var(--roxo-100); }

.hero { display: grid; justify-items: center; gap: var(--space-lg); margin-top: var(--space-lg); text-align: center; }
.hero__avatar {
  width: min(13rem, 58vw);
  height: auto;
  filter: drop-shadow(0 24px 40px var(--uv-a40));
}
.hero__texto { display: grid; justify-items: center; gap: var(--space-md); }
.hero h1 { font-size: clamp(2.25rem, 6vw + 1rem, 3.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.hero__lede { max-width: 34ch; font-size: 1.125rem; color: var(--roxo-100); text-wrap: balance; }
.hero__micro { font-size: var(--text-sm); color: var(--roxo-100); }

@media (min-width: 56rem) {
  .topo .envelope { max-width: 68rem; }
  .hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2xl); margin-top: var(--space-xl); }
  .hero__avatar { grid-column: 2; grid-row: 1; width: clamp(18rem, 26vw, 24rem); }
  .hero__texto { grid-column: 1; grid-row: 1; }
}

.selo-topo {
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--areia-a18);
  font-size: var(--text-sm);
  font-weight: 600;
}
.selo-topo--urgente { background: var(--mel-400); color: var(--tinta-900); }

/* ---------- botões ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.5rem;
  padding: 0 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--areia-50);
  color: var(--roxo-700);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 30px -14px var(--uv-a70);
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.cta__icone { width: 1.375rem; height: 1.375rem; fill: currentColor; flex: none; }
.cta:active { transform: scale(0.97); }
@media (hover: hover) { .cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px var(--areia-a18), 0 18px 34px -14px var(--uv-a70); } }
.topo .cta { width: 100%; max-width: 24rem; }

.cta--contorno { background: transparent; color: var(--roxo-700); box-shadow: inset 0 0 0 1.5px var(--roxo-700); }
@media (hover: hover) { .cta--contorno:hover { background: var(--roxo-100); box-shadow: inset 0 0 0 1.5px var(--roxo-700); } }
.cta--claro { background: var(--areia-50); color: var(--roxo-700); }

.cta--fixo {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
  z-index: 50;
  background: var(--roxo-600);
  color: var(--areia-50);
  box-shadow: 0 16px 34px -12px var(--uv-a70);
  opacity: 0;
  transform: translateY(140%);
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.cta--fixo.ativo { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 48rem) { .cta--fixo { left: auto; right: var(--space-lg); width: 22rem; } }

/* ---------- blocos ---------- */

.bloco { padding: var(--space-2xl) 0; }
.bloco .envelope { display: grid; justify-items: center; gap: var(--space-md); text-align: center; }
.bloco__lede { max-width: 52ch; color: var(--color-muted); text-wrap: balance; }
.bloco--lilas { background: var(--roxo-100); }
.bloco .cta { justify-self: center; }

/* lojas */
.lojas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); width: 100%; padding: 0; list-style: none; }
@media (min-width: 36rem) { .lojas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.loja {
  --marca: var(--roxo-600);
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-rule), inset 0 4px 0 var(--marca), var(--shadow-whisper);
}
.loja--shopee { --marca: #EE4D2D; }
.loja--ml { --marca: #FFE600; --marca-texto: #2D3277; }
.loja--amazon { --marca: #FF9900; --marca-texto: #232F3E; }
.loja__logo { height: 2.25rem; width: auto; max-width: 9rem; margin: 0 auto var(--space-2xs); object-fit: contain; }
.loja__nome { display: none; font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; color: var(--marca-texto, var(--marca)); }
.loja--shopee .loja__nome { color: #D73211; } /* o laranja da Shopee clareado não passa contraste em texto */
.loja--sem-logo .loja__logo { display: none; }
.loja--sem-logo .loja__nome { display: block; }
.loja__texto { color: var(--color-ink-2); font-size: var(--text-card); }

/* vitrine: carrossel infinito com as ofertas reais da Shopee */
.bloco--vitrine { display: grid; gap: var(--space-lg); }
.bloco--vitrine .envelope { gap: var(--space-sm); }
.vitrine {
  display: grid;
  gap: var(--space-sm);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.vitrine__trilho {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: desliza var(--duracao, 60s) linear infinite;
}
.vitrine__trilho--volta { animation-direction: reverse; }
.vitrine:hover .vitrine__trilho, .vitrine:active .vitrine__trilho { animation-play-state: paused; }
@keyframes desliza { to { transform: translateX(-50%); } } /* cards repetidos: meia volta emenda no começo */

.produto {
  position: relative;
  flex: none;
  width: 9.5rem;
  margin-right: var(--space-sm); /* margem e não gap: assim os 50% batem exato e a emenda não pula */
  padding-bottom: var(--space-sm);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-rule), var(--shadow-whisper);
  overflow: hidden;
}
@media (min-width: 48rem) { .produto { width: 11rem; } }
.produto__foto { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; }
.produto__foto--vazia { display: grid; place-items: center; background: var(--roxo-100); color: var(--roxo-300); font: 800 2.5rem/1 var(--font-display); }
.produto__off {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--mel-400);
  color: var(--tinta-900);
  font-size: var(--text-xs);
  font-weight: 700;
}
.produto__preco, .produto__nome { padding-inline: var(--space-sm); }
.produto__preco { margin-top: var(--space-xs); font-variant-numeric: tabular-nums; line-height: 1.2; }
.produto__preco small { display: block; font-size: 0.6875rem; color: var(--color-muted); }
.produto__preco strong { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
.produto__nome {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--color-ink-2);
}

@media (prefers-reduced-motion: reduce) {
  /* sem animação: vira uma fileira que a pessoa arrasta com o dedo */
  .vitrine { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
  .vitrine__trilho { animation: none; }
  .vitrine__trilho .produto[aria-hidden="true"] { display: none; }
}

/* fechamento (roxo) */
.final { --color-focus: var(--areia-50); padding: var(--space-2xl) 0; background: var(--roxo-600); color: var(--areia-50); text-align: center; }
.final .envelope { display: grid; justify-items: center; gap: var(--space-md); }
.final p { color: var(--roxo-100); }

.rodape { padding: var(--space-lg) 0 calc(var(--space-2xl) + 3rem); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }

/* ---------- "Abrindo o WhatsApp…" ---------- */

.abrindo { min-height: 100dvh; display: grid; place-items: center; background: var(--roxo-600); color: var(--areia-50); text-align: center; }
.abrindo__caixa { display: grid; justify-items: center; gap: var(--space-md); padding: var(--gutter); }
.abrindo h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.abrindo p { color: var(--roxo-100); }
.abrindo__giro { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 3px solid var(--areia-a30); border-top-color: var(--areia-50); animation: giro 0.8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}