/* NextQR · camada de movimento e acabamento (13/10/2026). Carregada por último. */
@property --sweep{syntax:'<percentage>';inherits:false;initial-value:100%}
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--glow:#6240d9;--scroll-thumb:#c3cde0;--scroll-thumb-hover:#9fadc7}
body.dark{--scroll-thumb:#34496a;--scroll-thumb-hover:#4a6390}

/* Barras de rolagem estilizadas */
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover)}
.sidebar{scrollbar-color:#2d4770 transparent}
.sidebar::-webkit-scrollbar-thumb{background-color:#2d4770}

/* Mobile: sem auto-zoom do iOS ao focar campos e sem estouro lateral */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
@media(max-width:600px){input,select,textarea,.input,.select,.textarea{font-size:16px}}

/* Correção: CTA final da landing ficou com texto escuro sobre fundo marinho */
.lp-final{border:0;isolation:isolate}
.lp-final h2{color:#fff}
.lp-final h2 em{background:linear-gradient(100deg,#8fb4ff,#b9a3ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.lp-final p{color:#c5d1e2}
.lp-final .lp-eyebrow{color:#a9c9ff}
.lp-final:before{content:'';position:absolute;inset:-40% -10% auto auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#4f6bff38,transparent 65%);z-index:-1;animation:glowDrift 12s ease-in-out infinite alternate}
.lp-final-art{animation:floatCard 6s ease-in-out infinite}
@keyframes floatCard{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(5deg) translateY(-12px)}}
@keyframes glowDrift{to{transform:translate(-120px,80px) scale(1.15)}}

/* Brand Kit: formulário com espaço para os seletores e prévia que acompanha a rolagem */
.detail-grid.brand-design-grid{grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)}
.brand-preview-card{position:sticky;top:104px}
@media(max-width:1050px){.detail-grid.brand-design-grid{grid-template-columns:1fr}.brand-preview-card{position:static}}

/* Correção: a gaveta fechada no celular projetava sombra sobre a borda esquerda do conteúdo */
@media(max-width:930px){.sidebar:not(.open){box-shadow:none}.sidebar{transition:transform .35s var(--motion-ease),box-shadow .35s}}

/* Esqueleto de carregamento */
.loader.skeleton-page{display:grid;place-items:stretch;justify-content:stretch;align-content:start;gap:18px;padding:6px 0;min-height:0;width:100%}
.sk{border-radius:14px;background:linear-gradient(90deg,#e3e9f2 0%,#f4f7fb 45%,#e3e9f2 90%);background-size:220% 100%;animation:skShimmer 1.3s ease-in-out infinite}
body.dark .sk{background-image:linear-gradient(90deg,#182940 0%,#22385a 45%,#182940 90%)}
.sk-title{height:34px;width:min(340px,70%)}
.sk-line{height:14px;width:min(520px,90%)}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.sk-card{height:120px}
.sk-block{height:280px}
@keyframes skShimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* Gráficos: barras crescem a partir da esquerda, rosca varre em sentido horário */
.bar-fill,.location-track span{transform-origin:left center}
.donut.donut-sweep{-webkit-mask:radial-gradient(circle,#000 0 54%,transparent 54.5%),conic-gradient(#000 var(--sweep),transparent 0);mask:radial-gradient(circle,#000 0 54%,transparent 54.5%),conic-gradient(#000 var(--sweep),transparent 0)}
.chart-host{position:relative}
.chart .line-stroke{stroke-linecap:round;stroke-linejoin:round}
.chart-guide{stroke:#6240d9;stroke-width:1;stroke-dasharray:4 4;opacity:0;transition:opacity .15s}
.chart-dot{fill:#fff;stroke:#6240d9;stroke-width:2.5;opacity:0;transition:opacity .15s,cx .12s var(--motion-ease),cy .12s var(--motion-ease)}
.chart-tip{position:absolute;transform:translate(-50%,calc(-100% - 14px));pointer-events:none;background:#13233c;color:#fff;padding:7px 11px;border-radius:10px;font-size:12px;line-height:1.35;white-space:nowrap;box-shadow:0 10px 26px #13233c33;opacity:0;transition:opacity .15s,left .12s var(--motion-ease),top .12s var(--motion-ease);z-index:3}
.chart-tip b{font-size:14px;font-variant-numeric:tabular-nums}
.chart-tip small{display:block;color:#a9bddb;font-size:11px}
.chart-active .chart-tip,.chart-active .chart-guide,.chart-active .chart-dot{opacity:1}
body.dark .chart-tip{background:#e8edf8;color:#13233c}
body.dark .chart-tip small{color:#57657c}

/* Números: alinhamento tabular e destaque quando mudam na atualização automática */
.ref-metric-copy strong,.metric-value,.donut-center strong,.campaign-stats strong,.table td{font-variant-numeric:tabular-nums}
.value-bump{animation:valueBump .9s var(--motion-ease)}
@keyframes valueBump{0%{color:inherit}25%{color:#16866d;transform:translateY(-3px)}100%{color:inherit;transform:none}}
.ref-metric-copy strong,.metric-value{display:inline-block}

/* Ondulação no clique */
.btn-primary,.promo-cta,.quick-footer .btn{position:relative;overflow:hidden}
.motion-ripple{position:absolute;width:260px;height:260px;border-radius:50%;background:#fff;pointer-events:none;mix-blend-mode:soft-light}

/* Luz que segue o ponteiro */
.lp-bento article,.studio-style,.qr-card,.ref-metric,.campaign-card{position:relative}
.lp-bento article:after,.studio-style:after,.qr-card:after,.ref-metric:after,.campaign-card:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),#6240d912,transparent 60%)}
.lp-feature-analytics:after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),#8fb4ff1f,transparent 60%)!important}
@media(hover:hover){
 .lp-bento article:hover:after,.studio-style:hover:after,.qr-card:hover:after,.ref-metric:hover:after,.campaign-card:hover:after{opacity:1}
 .qr-card,.ref-metric,.campaign-card,.folder-card,.lp-process-grid article,.lp-use-grid>*{transition:transform .35s var(--motion-ease),box-shadow .35s var(--motion-ease),border-color .35s}
 .qr-card:hover,.campaign-card:hover,.folder-card:hover,.lp-process-grid article:hover{transform:translateY(-4px);box-shadow:0 18px 40px #19335412}
 .ref-metric:hover{transform:translateY(-3px);box-shadow:0 14px 32px #19335410}
 .qr-card img,.ref-metric-icon,.lp-feature-icon{transition:transform .45s var(--motion-ease)}
 .qr-card:hover img{transform:scale(1.04)}
 .ref-metric:hover .ref-metric-icon{transform:rotate(-6deg) scale(1.08)}
 .nav-item .nav-icon{transition:transform .3s var(--motion-ease)}
 .nav-item:hover .nav-icon{transform:translateX(3px)}
 .lp-bento article:hover .lp-feature-icon{transform:rotate(-8deg) scale(1.1)}
 .theme-sun:hover .app-icon{transform:rotate(40deg)}
}
.theme-sun .app-icon{transition:transform .5s var(--motion-ease)}

/* Status de monitoramento ao vivo */
.usage-title:before{animation:livePulse 2.2s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 #16866d55}70%{box-shadow:0 0 0 8px #16866d00}100%{box-shadow:0 0 0 0 #16866d00}}

/* Toast com barra de tempo */
.toast{position:relative;overflow:hidden}
.toast:after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#2463eb,#7346ed);transform-origin:left;animation:toastTimer 4.2s linear forwards}
.toast.error:after{background:#d64553}
@keyframes toastTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* Faixa de boas-vindas: ondas em movimento lento */
.welcome-waves svg path:first-child{animation:waveDrift 14s ease-in-out infinite alternate}
.welcome-waves svg path:last-child{animation:waveDrift 18s ease-in-out infinite alternate-reverse}
@keyframes waveDrift{to{transform:translateX(-40px)}}

/* Landing: barra de leitura, título com brilho e faixa de recursos */
.lp-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,#2463eb,#7346ed,#16866d);transform:scaleX(0);transform-origin:left;pointer-events:none}
.quick-intro h1 span{background:linear-gradient(100deg,#2463eb,#7346ed,#2463eb);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:titleSheen 7s ease-in-out infinite}
@keyframes titleSheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.lp-capabilities div span{transition:color .25s,transform .3s var(--motion-ease)}
@media(hover:hover){.lp-capabilities div span:hover{color:#6240d9;transform:translateY(-2px)}}
.lp-faq-list details[open] p{animation:faqOpen .35s var(--motion-ease)}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lp-faq-list summary:after{transition:transform .3s var(--motion-ease)}
.lp-faq-list details[open] summary:after{transform:rotate(45deg)}

/* Paleta de comandos */
.search-key{cursor:pointer}
.palette-backdrop{position:fixed;inset:0;z-index:200;background:#0c172999;backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;padding:min(14vh,120px) 16px 16px;animation:paletteFade .18s ease-out}
.palette{width:min(620px,100%);background:var(--white,#fff);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 90px #0c172955;overflow:hidden;animation:paletteIn .26s var(--motion-ease)}
.palette-search{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);color:var(--soft)}
.palette-input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);min-width:0}
.palette-list{max-height:min(52vh,420px);overflow:auto;padding:8px}
.palette-group{margin:10px 10px 6px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.palette-item{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:10px 12px;border:0;border-radius:11px;background:transparent;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.palette-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-item small{display:block;font-size:11px;color:var(--soft)}
.palette-item .app-icon{color:var(--purple,#6240d9);flex:none}
.palette-item.active{background:var(--purple-light,#efebff)}
.palette-item:focus-visible{outline:2px solid #2463eb;outline-offset:-2px}
.palette-empty{padding:28px 12px;text-align:center;color:var(--soft);font-size:13px}
.palette kbd{font:600 11px/1 inherit;font-family:inherit;padding:4px 7px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2,#f7f9fd);color:var(--soft)}
.palette-foot{display:flex;gap:18px;flex-wrap:wrap;padding:11px 18px;border-top:1px solid var(--line);font-size:11px;color:var(--soft)}
.palette-foot kbd{margin-right:3px}
@keyframes paletteFade{from{opacity:0}to{opacity:1}}
@keyframes paletteIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:600px){.palette-backdrop{padding-top:12px}.palette-foot{display:none}}

/* Movimento reduzido: tudo parado, conteúdo intacto */
@media(prefers-reduced-motion:reduce){
 .lp-final:before,.lp-final-art,.usage-title:before,.toast:after,.welcome-waves svg path,.quick-intro h1 span,.sk,.palette-backdrop,.palette,.lp-faq-list details[open] p{animation:none!important}
 .lp-final-art{transform:rotate(8deg)}
 .qr-card,.ref-metric,.campaign-card,.folder-card,.chart-tip,.chart-dot{transition:none!important}
 .lp-progress{display:none}
}