/* ClickGo v7: minimalista. Fundo escuro, um acento ciano, tipografia forte, muito respiro, movimento discreto.
   Este arquivo vem depois do v5.css e o deixa mais limpo; as seções novas (fita de vídeos, mapa, animações) moram aqui. */
:root {
  --ac: #4cc9ff;
  --ac-fraco: rgba(76, 201, 255, .14);
  --linha: rgba(236, 247, 255, .1);
  --linha-2: rgba(236, 247, 255, .18);
  --cartao: #070c16;
}

/* ===== limpeza geral do v5 ===== */
.grande em, h1 em { background: none; -webkit-text-fill-color: currentColor; color: var(--ac); }
.medio em { color: var(--ac); }
.btn-prim, .flutuante { color: #021019; background: var(--ac); box-shadow: none; }
.btn-prim:hover { box-shadow: none; transform: translateY(-1px); background: #7ad8ff; }
.btn-linha:hover { border-color: var(--ac); }
.slate { color: var(--txt-2); }
.slate b { color: var(--ac); background: transparent; border: 1px solid rgba(76, 201, 255, .45); }
.claquete { color: var(--ac); }
.escolha b { background: transparent; color: var(--ac); border: 1px solid rgba(76, 201, 255, .45); }
.escolha a { background: rgba(2, 5, 12, .7); border-color: var(--linha-2); }
.escolha a:hover { background: rgba(2, 5, 12, .85); border-color: var(--ac); }
.checks li::before { background: var(--ac); }
.linha-tempo b, .checks b, .btn-texto { color: var(--ac); }
.ficha-bloco, .conversa, .tela { background: var(--cartao); border-color: var(--linha); }
.ficha-bloco h3 { color: var(--ac); }
.b.bot { background: var(--ac-fraco); border-color: rgba(76, 201, 255, .3); }
.b.cli { background: rgba(236, 247, 255, .07); }
.tela:hover { border-color: var(--linha-2); transform: none; }
/* menos efeito: sem o "corte" de cena, vídeo de fundo mais calmo, entrada curta */
.js-v5 .corte, .js-v5 .cena.em-cena .corte { display: none !important; animation: none !important; }
.cena:not(.abertura) .cena-video { opacity: .5; }
@supports (animation-timeline: view()) { .cena .cena-video { animation: none; } }
.js-v5 .cena .cena-in > * { transform: translateY(12px); transition: opacity .6s ease, transform .7s var(--mola); }
.js-v5 .cena.em-cena .cena-in > *:nth-child(n) { transition-delay: 0s; }
.canto { padding: clamp(80px, 11vw, 140px) clamp(16px, 5vw, 72px); background: var(--preto); border-color: var(--linha); }
.medio { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; margin-bottom: 0; }
.revela { transform: translateY(12px); }

/* ===== 03: fita contínua de vídeos com IA ===== */
.v7-vitrine { padding-left: 0; padding-right: 0; }
.v7-vitrine > .canto-in { padding: 0 clamp(16px, 5vw, 72px); }
.v7-topo { display: grid; gap: 22px 64px; align-items: end; margin-bottom: 48px; }
@media (min-width: 900px) { .v7-topo { grid-template-columns: 1.15fr 1fr; } }
.v7-txt { color: var(--txt-2); font-size: 1.08rem; max-width: 520px; }
/* espaço delimitado: a fita fica dentro do container da página, com as laterais sumindo suave */
.reel { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
/* a fita tem 2 metades iguais (o JS repete os clipes até cada metade passar da largura do espaço), então -50% fecha o laço sem buraco */
.reel-faixa { display: flex; width: max-content; will-change: transform; }
.js-reel .reel-faixa { animation: fita var(--fita-dur, 60s) linear infinite; }
.reel:hover .reel-faixa { animation-play-state: paused; }
@keyframes fita { to { transform: translateX(-50%); } }
.rcard { position: relative; flex: none; width: clamp(140px, 14vw, 200px); aspect-ratio: 9 / 16; margin: 0 12px 0 0; border-radius: 14px; overflow: hidden; background: #000; }
/* o vídeo não recebe o mouse: assim o navegador não desenha o botão de "picture-in-picture"/tela cheia por cima do clipe */
.rcard video, .vcard video { pointer-events: none; }
.rcard video { display: block; width: 100%; height: 100%; object-fit: cover; }
.rcard figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 9px; border-radius: 999px; font: 600 .66rem/1 ui-monospace, Consolas, monospace; letter-spacing: .06em; color: var(--txt); background: rgba(2, 5, 12, .72); backdrop-filter: blur(6px); white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699px) { .rcard figcaption { left: 8px; bottom: 8px; padding: 4px 7px; font-size: .58rem; letter-spacing: .02em; max-width: calc(100% - 16px); } }
.v7-leg { margin-top: 22px; }
/* sem animação: a fita vira uma faixa que se arrasta */
html:not(.js-reel) .reel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }

/* mais exemplos (os vídeos de demonstração), em segundo plano */
.mais { margin-top: 40px; border-top: 1px solid var(--linha); padding-top: 18px; }
.mais summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--txt-2); }
.mais summary::-webkit-details-marker { display: none; }
.mais summary::before { content: '+'; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--linha-2); color: var(--ac); font-weight: 400; }
.mais[open] summary::before { content: '−'; }
.mais summary:hover { color: var(--txt); }
.vgrade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 22px; }
.vcard { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--linha); aspect-ratio: 9 / 16; }
.vcard video { width: 100%; height: 100%; object-fit: cover; }
.vcard::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 62%, rgba(2, 5, 12, .9)); }
.vcard figcaption { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; display: grid; }
.vcard figcaption b { font: 700 .85rem/1.2 var(--titulo); }
.vcard figcaption span { font-size: .74rem; color: var(--txt-2); }
@media (max-width: 899px) { .vgrade { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .vgrade { grid-template-columns: repeat(2, 1fr); } }

/* ===== 04: sistemas, minimalista: diagrama de linhas finas + lista ===== */
.sis8-corpo { display: grid; gap: 40px 72px; align-items: center; margin-top: 64px; }
@media (min-width: 960px) { .sis8-corpo { grid-template-columns: 1fr 1fr; } }
.mapa { max-width: 520px; width: 100%; margin: 0 auto; }
.mapa-svg { display: block; width: 100%; height: auto; overflow: visible; }
.m-linha { stroke: rgba(236, 247, 255, .22); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .2s; }
.desenha .m-linha { stroke-dashoffset: 1; }
.desenha.visto .m-linha { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--mola), stroke .2s; }
.m-nome { font: 700 17px 'Bricolage Grotesque', 'Onest', sans-serif; fill: var(--txt); letter-spacing: -.01em; transition: fill .2s; }
.m-no.centro .m-nome { fill: var(--ac); font-size: 18px; }
.m-aro { fill: none; stroke: var(--ac); stroke-width: 1; opacity: .7; }
.mapa.foco .m-linha { stroke: rgba(236, 247, 255, .08); }
.mapa.foco .m-linha.lig { stroke: var(--ac); }
.mapa.foco .m-no:not(.ativo):not(.centro) .m-nome { fill: var(--txt-2); }
.m-no.ativo .m-nome { fill: var(--ac); }
.sis-lista { margin: 0; display: grid; }
.sis-lista > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 4px 20px; padding: 16px 0; border-top: 1px solid var(--linha); }
.sis-lista > div:last-child { border-bottom: 1px solid var(--linha); }
.sis-lista dt { font: 700 1.05rem/1.4 var(--titulo); }
.sis-lista dd { margin: 0; color: var(--txt-2); font-size: .97rem; }
.sis-lista > div:hover dt { color: var(--ac); }
@media (max-width: 599px) { .sis-lista > div { grid-template-columns: 1fr; } }
.btn-git { color: var(--txt); border: 1px solid var(--linha-2); background: transparent; }
.btn-git:hover { border-color: var(--ac); }

/* ===== Extra: animações em código, faixa pequena ===== */
.anima8 { padding-top: 56px; padding-bottom: 56px; }
.anima8-in { display: grid; gap: 22px 48px; align-items: center; }
@media (min-width: 900px) { .anima8-in { grid-template-columns: 1fr 1.1fr; } }
.anima8 .slate { margin-bottom: 12px; }
.anima8-txt { color: var(--txt-2); font-size: .95rem; max-width: 460px; }
.anima8-tiras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 560px; }
.anima-caixa { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: var(--cartao); border: 1px solid var(--linha); }
.anima { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }

@media (prefers-reduced-motion: reduce) {
  .js-reel .reel-faixa { animation: none !important; }
}