/* GERADO por ferramentas/montar-site.py a partir do index.html (carrossel de vídeos). Não editar aqui. */
/* ---------- carrossel de vídeos dos sites entregues (30/09/2026) ---------- */
#na-pratica{overflow:hidden}
.vc{position:relative;margin:clamp(34px,5vw,56px) 0 clamp(40px,6vw,70px)}
.vc-h{text-align:center;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.vc-stage{position:relative;height:calc(min(760px,62vw) * .575 + 40px);perspective:1800px;touch-action:pan-y;user-select:none}
.vc-card{position:absolute;left:50%;top:0;width:min(760px,62vw);margin:0 0 0 calc(min(760px,62vw) / -2);
  border-radius:18px;overflow:hidden;background:#0F0D15;border:1px solid var(--stroke);cursor:pointer;
  box-shadow:0 40px 80px -40px rgba(40,20,90,.55);transform-origin:50% 50%;
  transition:transform .7s var(--ease-out),opacity .5s var(--ease);will-change:transform}
.vc-card::after{content:'';position:absolute;inset:0;background:#0B0A10;opacity:var(--dim,0);transition:opacity .6s var(--ease);pointer-events:none}
.vc-card.on{cursor:pointer}
.vc-ir{position:absolute;right:14px;bottom:14px;z-index:3;padding:8px 14px;border-radius:99px;background:rgba(15,13,21,.82);color:#fff;font-size:.8rem;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease-out);pointer-events:none}
.vc-card.on:hover .vc-ir{opacity:1;transform:none}
@media (hover:none){.vc-card.on .vc-ir{opacity:1;transform:none}}
.vc-bar{display:flex;gap:6px;align-items:center;height:24px;padding:0 12px;background:#1B1824}
.vc-bar i{width:8px;height:8px;border-radius:50%;background:#3A3448}
.vc-bar i:first-child{background:#E0665F}.vc-bar i:nth-child(2){background:#E0B34A}.vc-bar i:nth-child(3){background:#52B86A}
.vc-card video{display:block;width:100%;aspect-ratio:1280/736;object-fit:cover;background:#0F0D15}
/* moldura de aparelho nos vídeos (Hugo, 05/10/2026: "parecido com o celular da conversa"): borda escura grossa,
   cantos redondos e o filete de brilho, como o .celular da /ia/; a barra do navegador fica dentro, como num monitor */
.vc-card{border:10px solid #0B0B10;border-radius:28px;background:#0B0B10;
  box-shadow:0 40px 80px -40px rgba(40,20,90,.6),0 0 0 1.5px rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.06)}
[data-theme="light"] .vc-card{border-color:#16131F;background:#16131F}
.vc-card .vc-bar{border-radius:18px 18px 0 0}
@media (max-width:760px){ .vc-card{border-width:6px;border-radius:20px} .vc-card .vc-bar{border-radius:14px 14px 0 0} }
.vc-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--purple),var(--accent));z-index:2}
.vc-arrow{position:absolute;top:calc(min(760px,62vw) * .575 / 2 + 44px);transform:translateY(-50%);z-index:20;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:var(--bg);border:1px solid var(--stroke);box-shadow:0 10px 30px -12px rgba(40,20,90,.45);
  transition:transform .3s var(--ease-out),border-color .3s}
.vc-arrow:hover{border-color:var(--purple);transform:translateY(-50%) scale(1.08)}
.vc-arrow svg{width:18px;height:18px;stroke:var(--text);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vc-arrow.prev{left:calc(50% - min(760px,62vw) / 2 - 24px)}
.vc-arrow.next{right:calc(50% - min(760px,62vw) / 2 - 24px)}
.vc-cap{text-align:center;margin-top:18px;min-height:48px}
.vc-cap b{display:block;font-family:'Jost',sans-serif;font-weight:400;font-size:1.25rem;letter-spacing:-.01em}
.vc-cap{display:flex;flex-direction:column;align-items:center}
.vc-ir{display:none!important}   /* o botão "Visitar site" embaixo substitui a etiqueta em cima do vídeo (05/10/2026) */
.vc-visitar{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 20px;font-size:.88rem}
.vc-visitar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.vc-visitar:hover svg{transform:translate(2px,-2px)}
.vc-visitar[hidden]{display:none}
.vc-cap span{font-size:.84rem;color:var(--muted)}
.vc-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.vc-dots button{width:8px;height:8px;border-radius:99px;background:var(--stroke-hi);transition:width .4s var(--ease-out),background .4s}
.vc-dots button[aria-current="true"]{width:26px;background:var(--purple)}
@media (max-width:760px){
  .vc-stage{height:calc(84vw * .575 + 34px);perspective:1100px}
  .vc-card{width:84vw;margin-left:-42vw;border-radius:12px}
  .vc-bar{height:18px;padding:0 9px}.vc-bar i{width:6px;height:6px}
  .vc-arrow{top:calc(84vw * .575 / 2 + 44px);width:38px;height:38px}
  .vc-arrow.prev{left:6px}.vc-arrow.next{right:6px}
}
@media (prefers-reduced-motion:reduce){.vc-card{transition:none}}