/* 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,.vc-visitar.btn-primary:hover svg{transform:translate(2px,-2px)}   /* roxo (Hugo, 03/11/2026) */
.vc-visitar[hidden]{display:none}
/* ---------- 03/11/2026: menos rótulos miúdos. Os de abertura de seção (.eyebrow) ficam; os de DENTRO dos cartões viram texto
   normal, mais fácil de ler (eram mono, maiúsculo e espaçado em todo lugar). ---------- */
.vc-h,.case-seg,.case-kind,.case dt,.step-toggle,.role,.tap{font-family:'Manrope',Arial,sans-serif!important;letter-spacing:.005em!important;text-transform:none!important}
html body .vc-h{font-size:.95rem;font-weight:500}
html body .case-seg{font-size:.82rem;font-weight:600}
html body .case-kind{font-size:.8rem;font-weight:500}
html body .case dt{font-size:.8rem;font-weight:600;color:var(--muted)}
html body .step-toggle{font-size:.84rem;font-weight:600}
html body .role{font-size:.82rem;font-weight:600}
html body .tap{font-size:.8rem}
/* ---------- 03/11/2026: as 6 soluções logo abaixo do chat do topo (prefixo sx-) ---------- */
.sx{position:relative;z-index:3;margin-top:clamp(36px,5vw,56px);margin-bottom:clamp(64px,7vw,84px);text-align:center}   /* embaixo: a linha "O que dá para fazer" fica no vão, não em cima dos cartões */
.sx-t{font-size:.92rem;color:var(--muted);margin:0 0 16px}
.sx-g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;max-width:1040px;margin:0 auto}
.sx-i{display:flex;align-items:center;gap:11px;padding:13px 14px;border-radius:16px;border:1px solid var(--stroke);background:var(--glass-2);
  color:var(--text);text-decoration:none;font-size:.88rem;font-weight:500;line-height:1.25;text-align:left;
  box-shadow:var(--inset);transition:transform .35s var(--ease-out),border-color .3s,box-shadow .35s}
[data-theme="dark"] .sx-i{background:rgba(22,19,32,.88)}
.sx-i:hover{transform:translateY(-3px);border-color:var(--stroke-hi);box-shadow:var(--inset),0 16px 34px -18px rgba(130,90,212,.55)}
.sx-i i{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--purple-dim)}
.sx-i svg{width:19px;height:19px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* 04/11/2026: os 6 atalhos sobem em sequência quando a home abre (backwards: não prende o transform do hover) */
.sx-i{animation:sxSobe .7s var(--ease-out) backwards}
.sx-i:nth-child(2){animation-delay:.06s}.sx-i:nth-child(3){animation-delay:.12s}.sx-i:nth-child(4){animation-delay:.18s}
.sx-i:nth-child(5){animation-delay:.24s}.sx-i:nth-child(6){animation-delay:.30s}
@keyframes sxSobe{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){.sx-i{animation:none}}
@media (max-width:1100px){.sx-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.sx-g{gap:8px}.sx-i{flex-direction:column;justify-content:center;gap:8px;padding:12px 6px;text-align:center;font-size:.78rem}
  .sx-i i{width:34px;height:34px}.sx-t{font-size:.86rem;padding-inline:8px}}
/* ---------- 03/11/2026 (Hugo: "parecer muito profissional"): "Projetos reais" vira uma FAIXA ESCURA nos dois temas.
   Quebra o branco contínuo da home e dá peso de portfólio. As variáveis do tema escuro valem só aqui dentro. */
#na-pratica{isolation:isolate;color:var(--text);
  --bg:#0C0A13; --text:#F6F5F9; --muted:rgba(246,245,249,.74); --faint:rgba(246,245,249,.60);
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.08); --stroke:rgba(255,255,255,.10); --stroke-hi:rgba(255,255,255,.24);
  --soft:rgba(255,255,255,.05); --inset:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(255,255,255,.02);
  --lift:0 30px 70px -28px rgba(0,0,0,.85); --edge:rgba(255,255,255,.5); --accent:#C7A9FF;
  background:radial-gradient(55% 45% at 50% 0%,rgba(130,90,212,.30),transparent 70%),
             radial-gradient(35% 35% at 88% 100%,rgba(130,90,212,.16),transparent 70%),#0C0A13}
[data-theme="dark"] #na-pratica{background:radial-gradient(55% 45% at 50% 0%,rgba(130,90,212,.26),transparent 70%),
             radial-gradient(35% 35% at 88% 100%,rgba(130,90,212,.14),transparent 70%),#110E1B;
  border-block:1px solid rgba(255,255,255,.06)}
#na-pratica .glass{background:rgba(255,255,255,.045)}
#na-pratica .vc-card{border-color:#1C1828;background:#1C1828}
#na-pratica + .rolar-vao .rolar{color:rgba(246,245,249,.62)}
#na-pratica + .rolar-vao .rolar:hover{color:#fff}
#na-pratica .vc-arrow{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
#na-pratica .vc-arrow:hover{background:rgba(255,255,255,.16);border-color:var(--accent)}
.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}}