/* ==========================================================================
   MDN Flow: produto próprio
   Aqui fica a faixa (layout estático e celular); com as cenas de rolagem ela vira o palco da
   seção (css/scenes/flow.css).
   A imagem é a tela REAL "Receitas e despesas" do MDN Flow (recortada: só a área do sistema). Os dois
   destaques (menu Financeiro e totais) são recortes da mesma tela, para dar profundidade; sem dados de clientes.
   Ganchos de JS: [data-spotlight] recebe --mx/--my (brilho do ponteiro); js/scene.js escreve --rx/--ry.
   Atenção ao 3D: .product__world usa preserve-3d. Nada entre ele e as camadas (.flow) pode ter
   overflow, filter, opacity < 1 ou contain; as camadas em si podem.
   ========================================================================== */

.product {
  --f-line: rgb(255 255 255 / 0.13);
  position: relative;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background:
    radial-gradient(circle 18rem at var(--mx, 85%) var(--my, 0%), rgb(var(--c-violet) / 0.22), transparent 70%),
    var(--c-graphite);
}

/* ---------- Texto ---------- */

.product__kicker {
  color: var(--c-pencil);
  font-size: var(--fs-xs);
  font-weight: 620;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.product__title {
  margin-top: 0.75rem;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  letter-spacing: -0.035em;
}

.product__text {
  max-width: 30rem;
  margin-top: 0.75rem;
  color: var(--c-chalk);
}

/* o que torna o produto diferente: instalado e ajustado para cada empresa */
.product__note {
  max-width: 30rem;
  margin-top: 1.125rem;
  padding-left: 0.875rem;
  border-left: 2px solid rgb(var(--c-violet) / 0.85);
  color: var(--c-chalk);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.product__cta {
  margin-top: 1.5rem;
}

.product__cta .icon {
  transition: translate var(--dur) var(--ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product__cta:hover .icon {
    translate: 2px -2px;
  }
}

.product__caption {
  margin-top: 0.75rem;
  color: var(--c-chalk); /* sobre o palco índigo o cinza-lápis ficava abaixo de 4,5:1 */
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}

/* ---------- Tela do sistema (camadas em 3D) ---------- */

.product__art {
  position: relative;
  width: 100%;
  aspect-ratio: 1.9 / 1;
  container-type: inline-size;
  perspective: 1200px;
  perspective-origin: 50% 40%;
  touch-action: pan-y;
}

.product__world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx, 0) * 1deg + 5deg)) rotateY(calc(var(--ry, 0) * 1deg - 8deg));
}

.product__art[data-live="true"] .product__world {
  will-change: transform;
}

/* cartão de vidro escuro com luz vinda de cima à esquerda */
.flow {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--f-line);
  border-radius: 1.6cqw;
  background: #0c0c0e;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    0 3.5cqw 6cqw -3cqw rgb(0 0 0 / 0.95),
    0 0 7cqw -3cqw rgb(var(--c-violet) / 0.55);
}

.flow img {
  display: block;
  width: 100%;
  height: auto;
}

/* a tela inteira, ao fundo */
.flow--shot {
  top: 0;
  left: 7%;
  width: 93%;
  transform: translateZ(-30px);
}

/* destaque 1: o menu Financeiro, à frente e à esquerda */
.flow--menu {
  top: 26%;
  left: 0;
  width: 23%;
  transform: translateZ(70px);
}

/* destaque 2: os totais (receitas, despesas e resultado), mais à frente e embaixo */
.flow--totals {
  right: 7%;
  bottom: 1%;
  width: 62%;
  transform: translateZ(120px);
}

/* ---------- Faixa: ao lado do texto em telas médias e largas ---------- */

@media (width >= 48em) {
  .product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    column-gap: clamp(2rem, 1rem + 4vw, 4rem);
  }

  .product__visual {
    order: 2;
  }
}

@media (width < 48em) {
  .product__visual {
    margin-bottom: 1.75rem;
  }

  /* no celular a tela inteira fica pequena para ler: o destaque do menu cresce e os totais (faixa
     muito larga, ilegível nessa largura) saem */
  .product__art {
    aspect-ratio: 1.45 / 1;
  }

  .flow--menu {
    top: 32%;
    width: 46%;
  }

  .flow--totals {
    display: none;
  }
}