/* ===== visuais animados (sem imagens paradas) ===== */
.v{container-type:inline-size;position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#101014;border:1px solid var(--linha);color:#fff}
.v:not(.on) *{animation-play-state:paused!important}
/* site */
.v-site{padding:5cqw;display:flex;flex-direction:column;gap:3.4cqw}
.v-site .bar{height:9cqw;border-radius:99px;background:#1f1f26;display:flex;align-items:center;padding:0 3.6cqw;font:3.4cqw var(--mono);color:#a7a7b4;overflow:hidden}
.v-site .url{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:fv-url 9s infinite}
@keyframes fv-url{0%{width:0}14%,100%{width:19ch}}
.v-site .hero{flex:1;border-radius:3cqw;background:linear-gradient(135deg,#2b1a55,#12121a);padding:6cqw;position:relative;overflow:hidden}
.v-site .l{display:block;height:5.4cqw;border-radius:2cqw;background:#fff;width:0;margin-bottom:2.6cqw;animation:fv-l 9s infinite}
.v-site .l:nth-child(2){animation-delay:.25s;background:#8B5CF6}
@keyframes fv-l{0%,10%{width:0}26%,100%{width:var(--w)}}
.v-site .l:nth-child(1){--w:72%}.v-site .l:nth-child(2){--w:52%}
.v-site .p2{display:block;height:2.4cqw;border-radius:2cqw;background:#5a5a68;width:0;margin-top:1.6cqw;animation:fv-l 9s infinite .5s}.v-site .p2{--w:80%}.v-site .p3{--w:60%;animation-delay:.65s}
.v-site .cta{position:absolute;left:6cqw;bottom:6cqw;padding:2.6cqw 6cqw;border-radius:99px;background:#5B21B6;font-weight:700;font-size:4cqw;opacity:0;animation:fv-cta 9s infinite}
@keyframes fv-cta{0%,34%{opacity:0;transform:translateY(8px) scale(.9)}42%,100%{opacity:1;transform:none}}
.v-site .wa{position:absolute;right:5cqw;bottom:5cqw;background:#128C4E;border-radius:3cqw 3cqw 0 3cqw;padding:2.4cqw 3.4cqw;font-size:3.6cqw;opacity:0;transform:scale(.6);transform-origin:100% 100%;animation:fv-wa 9s infinite}
@keyframes fv-wa{0%,56%{opacity:0;transform:scale(.6)}62%{opacity:1;transform:scale(1.06)}66%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
/* social: feed com as marcas reais */
.v-soc{padding:5cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:2.6cqw;align-content:center}
.v-soc .t{aspect-ratio:1;border-radius:2.4cqw;overflow:hidden;opacity:0;animation:fv-pop 9s infinite;animation-delay:calc(var(--i) * .22s)}
.v-soc .t img{width:100%;height:100%;object-fit:cover}
@keyframes fv-pop{0%,2%{opacity:0;transform:scale(.4) rotate(-8deg)}9%{opacity:1;transform:scale(1.07)}12%,90%{opacity:1;transform:none}100%{opacity:0;transform:scale(.9)}}
.v-soc .h{position:absolute;right:11cqw;top:13cqw;font-size:17cqw;color:#ff4d6d;opacity:0;animation:fv-h 9s infinite;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
@keyframes fv-h{0%,55%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.3)}66%,80%{opacity:1;transform:scale(1)}88%,100%{opacity:0;transform:translateY(-8cqw)}}
/* design */
.v-des{display:grid;grid-template-columns:1.25fr 1fr;gap:3cqw;padding:5cqw}
.v-des .cartao{border-radius:3cqw;background:#FCF5F3;display:grid;place-items:center;overflow:hidden}
.v-des .cartao img{width:70%;animation:fv-mono 9s infinite}
@keyframes fv-mono{0%{opacity:0;transform:scale(.7) rotate(-6deg)}14%,88%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.04)}}
.v-des .col{display:flex;flex-direction:column;gap:2.6cqw}
.v-des .sw{flex:1;border-radius:2.4cqw;transform:translateX(30cqw);opacity:0;animation:fv-sw 9s infinite;animation-delay:calc(var(--i) * .3s + .5s)}
@keyframes fv-sw{0%,3%{opacity:0;transform:translateX(30cqw)}12%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateX(30cqw)}}
.v-des .aa{flex:1;display:grid;place-items:center;font:700 11cqw var(--sans);color:#F2D4D7;border:1px solid #3a3a44;border-radius:2.4cqw;animation:fv-sw 9s infinite 1.4s}

/* ===== VERSÃO 2: painéis horizontais ===== */
.hz{height:380vh;position:relative}
.hz-p{position:sticky;top:68px;height:calc(100vh - 68px);overflow:hidden}
.hz-t{display:flex;height:100%;width:300vw;will-change:transform}
.hz-n{flex:0 0 100vw;height:100%;display:flex;align-items:center;position:relative;overflow:hidden}
.hz-n .hz-big{position:absolute;left:-2vw;bottom:-5vw;font-size:30vw;font-weight:700;letter-spacing:-.06em;line-height:.8;opacity:.12;white-space:nowrap;pointer-events:none}
.hz-g{width:min(1120px,100% - 40px);margin-inline:auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,70px);align-items:center;position:relative;z-index:1}
.hz-g h3{font-size:clamp(40px,6.4vw,92px);margin:12px 0 16px}
.hz-g p.d{font-size:clamp(16px,1.6vw,21px);max-width:34ch}
.hz-n.a{background:#5B21B6;color:#fff}.hz-n.b{background:#F1F0EC;color:#0A0A0B}.hz-n.c{background:#17171A;color:#fff}
.hz-n.a .tag,.hz-n.c .tag{color:#C4B5FD}.hz-n.b .tag{color:#5B21B6}
.hz-n .btn{border-color:currentColor}
.hz-bar{position:absolute;z-index:3;left:max(20px,calc((100% - 1120px)/2));top:22px;display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.hz-bar i{display:block;width:44px;height:3px;border-radius:2px;background:rgba(127,127,127,.4);overflow:hidden;position:relative}
.hz-bar i::after{content:"";position:absolute;inset:0;background:currentColor;transform:scaleX(var(--f,0));transform-origin:left}
@media(max-width:860px){.hz-g{grid-template-columns:1fr;gap:14px}.hz-g .v{max-width:360px}.hz-n .hz-big{font-size:38vw}.hz-g h3{font-size:clamp(38px,12vw,52px)}}


.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.chips li{padding:6px 14px;border:1px solid currentColor;border-radius:999px;font-size:14px;opacity:.7}
.hz{padding:0}
.hz h3{line-height:1.05;letter-spacing:-.03em}
.hz-bar{mix-blend-mode:difference;color:#fff}
.hz-n .btn{border-color:currentColor;color:inherit;background:transparent}
.hz-nfc{padding:46px 0;text-align:center;color:var(--texto-suave);font-size:18px;background:var(--preto)}.hz-nfc b{color:var(--branco)}
@media(prefers-reduced-motion:reduce){.hz{height:auto}.hz-p{position:static;height:auto}.hz-t{flex-direction:column;width:100%;transform:none!important}.hz-n{flex:none;width:100%;min-height:80vh;padding:60px 0}.hz-bar{display:none}.v-site *,.v-soc *,.v-des *{animation:none!important;opacity:1!important;transform:none!important}}
.hz-bar{mix-blend-mode:normal;color:#fff;background:rgba(10,10,11,.6);padding:7px 14px;border-radius:99px;backdrop-filter:blur(8px);top:16px}.hz-bar i{background:rgba(255,255,255,.3)}
@media(max-width:860px){.hz-g{padding-top:54px;gap:12px;align-content:center}.hz-g .chips{display:none}.hz-g p.d{font-size:15px;margin-bottom:14px}.hz-g .v{aspect-ratio:16/10;max-width:100%}.hz-g h3{font-size:clamp(34px,10.5vw,46px);margin:8px 0 10px}}