/* Vitrine das telas do sistema (lib/site_conta.php, vitrine_telas): funciona no site claro das franquias (.sc) e no
   site escuro da plataforma (body.ps). A cor vem da marca: --sc (franquia) ou --x-p (plataforma). */
.vt-sec { --vt: var(--sc, var(--x-p, #7c3aed)); padding: clamp(56px, 8vw, 104px) 0; }
.vt-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.vt-cab { text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 5vw, 56px); }
.vt-cab h2 { margin: 0 0 .5em; }
.vt-cab p { font-size: 18px; opacity: .85; }
.vt-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-forte, var(--vt)); margin-bottom: 12px; }
.vt { display: grid; gap: 28px; align-items: start; }
@media (min-width: 992px) { .vt { grid-template-columns: 380px 1fr; } }
.vt-lista { display: grid; gap: 8px; }
@media (max-width: 991px) { .vt-lista { grid-auto-flow: column; grid-auto-columns: minmax(240px, 80%); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; } .vt-item { scroll-snap-align: start; } }
.vt-item { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; font: inherit; transition: background .2s, border-color .2s; }
.vt-item i { flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; color: var(--sc-forte, var(--vt)); background: color-mix(in srgb, var(--vt) 14%, transparent); }
.vt-item b { display: block; font-size: 15px; }
.vt-item small { display: block; font-size: 13px; line-height: 1.45; opacity: .75; margin-top: 2px; }
.vt-item:hover { background: color-mix(in srgb, currentColor 5%, transparent); }
.vt-item.on { background: color-mix(in srgb, var(--vt) 10%, transparent); border-color: color-mix(in srgb, var(--vt) 40%, transparent); }
.vt-item.on i { background: var(--vt); color: var(--sc-txt, #fff); }
.vt-tela { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); background: #f4f4f8;
  box-shadow: 0 40px 90px -30px rgba(16, 18, 45, .45), 0 0 0 6px color-mix(in srgb, var(--vt) 10%, transparent); }
.vt-barra { display: flex; gap: 6px; padding: 10px 14px; background: #e9e9f1; }
.vt-barra span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.vt-barra span:nth-child(2) { background: #febc2e; }
.vt-barra span:nth-child(3) { background: #28c840; }
.vt-imgs { position: relative; aspect-ratio: 1440 / 900; cursor: zoom-in; }
.vt-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity .5s; }
.vt-imgs img.on { opacity: 1; }
.vt-acao { text-align: center; margin-top: 32px; }
.vt-b { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 700; background: var(--vt); color: var(--sc-txt, #fff) !important; text-decoration: none; }
.vt-zoom { position: fixed; inset: 0; z-index: 200; background: rgba(10, 10, 16, .9); display: grid; place-items: center; padding: 20px; cursor: zoom-out; }
.vt-zoom img { max-width: min(1400px, 100%); max-height: calc(100vh - 40px); border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .vt-imgs img { transition: none; } }