/* AI Solutions · Módulo: vídeo YouTube em facade (VSL 16:9, miniatura grande de solução, curto vertical). O comportamento está no base.js. */
/* VSL em facade */
.vsl { grid-area: vsl; position: relative; margin: 0; }
.vsl__facade, .vsl__iframe {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 18px; overflow: hidden;
  background: var(--indigo); box-shadow: 0 0 0 1px var(--traco-forte), 0 40px 80px -40px rgba(0, 0, 0, .75);
}
.vsl__facade { cursor: pointer; }
.vsl__facade img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), filter .4s; }
.vsl__facade:hover img { transform: scale(1.02); filter: brightness(1.06); }
.vsl__iframe iframe { width: 100%; height: 100%; border: 0; display: block; }
.vsl::before {
  content: ""; position: absolute; z-index: 1; left: 6%; right: 6%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(107, 83, 249, 0), rgba(228, 220, 255, .85) 30%, #fff 50%, rgba(228, 220, 255, .85) 70%, rgba(107, 83, 249, 0));
  box-shadow: 0 0 14px 2px rgba(107, 83, 249, .65);
}
.vsl__legenda { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: .86rem; color: var(--texto-3); }
.vsl__legenda span:first-child { color: var(--texto-2); font-weight: 500; }
@media (max-width: 700px) {
  .vsl__facade, .vsl__iframe { border-radius: 14px; }
}
/* vídeo da solução: miniatura grande */
.sol-video { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: pointer; background: var(--indigo); box-shadow: 0 0 0 1px var(--traco-forte), 0 40px 80px -44px rgba(0, 0, 0, .8); }
.sol-video img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.sol-video:hover img { transform: scale(1.03); }
.sol-video::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(180deg, rgba(10, 1, 48, 0), rgba(10, 1, 48, .82)); pointer-events: none; }
.sol-video .play { width: 64px; height: 64px; margin: -32px 0 0 -32px; box-shadow: 0 0 0 8px rgba(243, 240, 255, .16), 0 0 30px 6px rgba(107, 83, 249, .5); }
.sol-video .play::after { border-width: 11px 0 11px 17px; }
.sol-video__legenda { position: absolute; z-index: 1; left: 18px; bottom: 16px; display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.sol-video__legenda b { font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700; font-size: 1.05rem; }
.sol-video__legenda small { font-size: .82rem; color: #d9d3fb; }
.curto { display: inline-flex; align-items: center; gap: 14px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; }
.curto__img { position: relative; flex: none; width: 64px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--traco-forte); background: var(--indigo); }
.curto__img img { width: 100%; height: 100%; object-fit: cover; }
.curto .play { width: 28px; height: 28px; margin: -14px 0 0 -14px; box-shadow: 0 0 0 4px rgba(243, 240, 255, .18); }
.curto .play::after { border-width: 5px 0 5px 8px; }
.curto__txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.curto__txt b { font-weight: 600; font-size: .98rem; text-decoration: underline; text-decoration-color: rgba(243, 240, 255, .35); text-underline-offset: .25em; text-decoration-thickness: 1px; }
@media (max-width: 720px) {
  .sol-video { order: 2; aspect-ratio: 16 / 10; border-radius: 16px; }
  .sol-video img { object-position: 50% 30%; }
}