/* AI Solutions · /solucoes-ecommerce/: hero com o vídeo de apresentação, as 5 soluções com vídeo Vimeo (facade) ou imagem. */

/* ---------- hero com o vídeo à direita ---------- */
.hero-ecom.hero-sub--com-media {
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  grid-template-areas: "mig mig" "tit media" "luz media" "resp media" "prova media" "acoes media" ". media";
  grid-template-rows: auto auto auto auto auto auto 1fr;
  align-items: start;
}
.hero-ecom > .migalhas { grid-area: mig; }
.hero-ecom > .hero-sub__titulo { grid-area: tit; }
.hero-ecom > .hero-sub__luz { grid-area: luz; }
.hero-ecom > .hero-sub__resposta { grid-area: resp; }
.hero-ecom > .hero-ecom__prova { grid-area: prova; }
.hero-ecom > .hero-sub__acoes { grid-area: acoes; }
.hero-ecom > .hero-sub__media { grid-area: media; align-self: center; margin-top: 14px; }
.hero-ecom__prova { margin: .9rem 0 0; font-size: .95rem; font-weight: 600; color: var(--luz); }
.hero-ecom__prova::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 1px 0; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(143, 125, 255, .95); vertical-align: middle; }

/* ---------- as soluções ---------- */
.solucoes { display: grid; gap: clamp(16px, 2vw, 24px); }
.solucao {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 28px clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(22px, 3vw, 36px); border-radius: 22px; border: 1px solid var(--traco); background: rgba(243, 240, 255, .03);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.solucao__icone { width: 44px; height: 44px; padding: 10px; border-radius: 12px; color: #cfc6ff; background: rgba(107, 83, 249, .16); border: 1px solid rgba(107, 83, 249, .35); box-sizing: border-box; }
.solucao__titulo { margin: 16px 0 0; font-family: var(--f-display); font-stretch: 112.5%; font-weight: 720; font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.15; letter-spacing: -.018em; }
.solucao__desc { margin: .5rem 0 1.1rem; font-size: var(--t-lead); line-height: 1.5; color: var(--texto-2); font-style: italic; }
.solucao .pontos { font-size: 1rem; color: #DAD5F7; }
.solucao__media { display: flex; justify-content: center; }
.solucao__imagem { width: 230px; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }

/* vídeo Vimeo vertical em facade: o iframe só entra ao clicar (pagina.js) */
.vimeo, .vimeo__iframe { position: relative; display: block; width: 100%; max-width: 250px; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--traco-forte), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.vimeo { cursor: pointer; }
.vimeo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.vimeo:hover img { transform: scale(1.03); }
.vimeo .play { width: 60px; height: 60px; margin: -30px 0 0 -30px; box-shadow: 0 0 0 8px rgba(243, 240, 255, .16), 0 0 30px 6px rgba(107, 83, 249, .5); }
.vimeo .play::after { border-width: 10px 0 10px 16px; }
.vimeo__legenda { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--luz); background: rgba(10, 1, 48, .78); }
.vimeo__iframe iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- prova + ações ---------- */
.prova-ecom { text-align: center; }
.prova-ecom__texto { max-width: 40rem; margin: 0 auto; font-size: var(--t-lead); line-height: 1.55; color: var(--texto-2); }
.prova-ecom__acoes { justify-content: center; }

@media (max-width: 900px) {
  .hero-ecom.hero-sub--com-media { grid-template-columns: 1fr; grid-template-areas: "mig" "tit" "luz" "resp" "prova" "acoes" "media"; grid-template-rows: none; }
  .hero-ecom > .hero-sub__media { margin-top: 28px; }
}
@media (max-width: 720px) {
  .solucao { grid-template-columns: 1fr; padding: 20px 18px 24px; }
  .solucao__media { order: 2; }
  .vimeo, .vimeo__iframe { max-width: 220px; }
  .solucao__imagem { width: 200px; }
}

/* ---------- perguntas do comprador (4.3, 08/10/2026): respostas com vários parágrafos ---------- */
.pergunta__corpo { max-width: 62ch; }
.pergunta__corpo > p + p { margin-top: .8em; }
.perguntas__mais { margin: 1.2rem 0 0; font-size: .95rem; }