/* ======================================================================
   Acabamento Nise (09/10 noite, sessão pitchday-7f): vidro, profundidade e luz.
   Pedido do André: "deixe mais bonito, coloque opacidade".
   Carregado por ÚLTIMO, só sobrescreve. Não renomeia classes nem IDs usados pelo JS.
   Ideia: fundo com aurora roxa/coral bem fraca, superfícies translúcidas com
   borda de luz em cima (vidro), sombras longas e brilho roxo só no que é ação.
   ====================================================================== */
:root,
:root[data-theme="dark"] {
  --vd-1: rgb(255 255 255 / 4.5%);         /* superfície de vidro */
  --vd-2: rgb(255 255 255 / 7%);           /* vidro em destaque / hover */
  --vd-borda: rgb(255 255 255 / 8%);
  --vd-luz: rgb(255 255 255 / 14%);        /* filete de luz na borda de cima */
  --vd-sombra: 0 1px 0 rgb(255 255 255 / 5%) inset, 0 18px 50px -24px rgb(0 0 0 / 85%);
  --vd-brilho: 0 0 0 1px rgb(164 107 255 / 45%), 0 12px 40px -10px rgb(138 77 255 / 55%);
  --vd-aurora-1: rgb(124 77 255 / 32%);
  --vd-aurora-2: rgb(255 106 77 / 14%);
  --vd-aurora-3: rgb(91 63 232 / 24%);
  --vidro: rgb(11 11 14 / 62%);
}
:root[data-theme="light"] {
  --vd-1: rgb(255 255 255 / 62%);
  --vd-2: rgb(255 255 255 / 85%);
  --vd-borda: rgb(20 16 40 / 8%);
  --vd-luz: rgb(255 255 255 / 90%);
  --vd-sombra: 0 1px 0 rgb(255 255 255 / 80%) inset, 0 18px 40px -26px rgb(40 20 90 / 35%);
  --vd-brilho: 0 0 0 1px rgb(124 58 237 / 35%), 0 12px 32px -12px rgb(124 58 237 / 35%);
  --vd-aurora-1: rgb(124 58 237 / 13%);
  --vd-aurora-2: rgb(255 106 77 / 8%);
  --vd-aurora-3: rgb(91 63 232 / 9%);
  --vidro: rgb(244 243 247 / 70%);
}

/* ---------- fundo: aurora fixa atrás de tudo ---------- */
body { background: var(--fundo); }
body::before {
  content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42vmax 32vmax at 18% 8%, var(--vd-aurora-1), transparent 70%),
    radial-gradient(36vmax 28vmax at 88% 22%, var(--vd-aurora-2), transparent 70%),
    radial-gradient(50vmax 36vmax at 50% 105%, var(--vd-aurora-3), transparent 70%);
  filter: blur(10px);
  animation: vd-aurora 26s ease-in-out infinite alternate;
}
@keyframes vd-aurora { to { transform: translate3d(-3vmax, 2vmax, 0) scale(1.06); } }

/* ---------- topo e faixa: vidro de verdade ---------- */
.topo {
  background: var(--vidro);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--vd-borda);
}
.abas button { border-radius: 10px; transition: color .2s, background .2s; }
.abas button:hover { background: var(--vd-1); }
.abas button.ativa { background: var(--acento-suave); color: var(--neon-forte); }
.faixa {
  background: linear-gradient(90deg, #8a4dff, #a46bff 45%, #c08bff);
  box-shadow: 0 8px 30px -12px rgb(138 77 255 / 70%);
}

/* ---------- botões: gradiente e brilho ---------- */
.pri {
  background: linear-gradient(180deg, #a06bff 0%, #8a4dff 55%, #7a3df5 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), inset 0 -3px 0 var(--neon-sombra), 0 10px 28px -12px rgb(138 77 255 / 80%);
  transition: transform .18s ease, box-shadow .25s ease, filter .2s;
}
.pri:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), inset 0 -3px 0 var(--neon-sombra), 0 16px 36px -12px rgb(138 77 255 / 95%); }
.pri:active { transform: translateY(0); }
.sec, .tema, .link-pilula {
  background: var(--vd-1); border: 1px solid var(--vd-borda);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sec:hover, .link-pilula:hover { background: var(--vd-2); border-color: var(--vd-luz); }

/* ---------- faixa "crie seu influenciador" ---------- */
.hype {
  background:
    radial-gradient(120% 160% at 0% 0%, rgb(138 77 255 / 22%), transparent 55%),
    linear-gradient(180deg, var(--vd-2), var(--vd-1));
  border: 1px solid var(--vd-borda);
  box-shadow: var(--vd-sombra);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}

/* ---------- herói: luz atrás do título e campo de vidro ---------- */
.heroi { position: relative; isolation: isolate; }
.heroi::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 4%; width: min(900px, 90vw); height: 70%;
  translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgb(138 77 255 / 28%), rgb(255 106 77 / 7%) 55%, transparent);
  filter: blur(30px);
}
/* sem text-shadow no título: a animação de entrada corta a sombra e vira caixa */
.heroi-marca {
  background: linear-gradient(180deg, #fff 10%, #c9a8ff 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] .heroi-marca { background-image: linear-gradient(180deg, #2a1f5c, #7c3aed); }
.heroi-sub { opacity: .85; }
.heroi-busca {
  background: var(--vd-1); border: 1px solid var(--vd-borda);
  box-shadow: var(--vd-sombra);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: border-color .2s, box-shadow .25s;
}
.heroi-busca:focus-within { border-color: rgb(164 107 255 / 55%); box-shadow: var(--vd-brilho); }
.heroi-modelos button { background: var(--vd-1); border: 1px solid var(--vd-borda); transition: background .2s, border-color .2s, transform .2s; }
.heroi-modelos button:hover { background: var(--vd-2); border-color: var(--vd-luz); transform: translateY(-1px); }

/* ---------- superfícies: tudo que era cinza chapado vira vidro ---------- */
.destaque, .painel, .resultados, .bloco, .card, .plano, .numeros div, .faq-lista details,
.capa-video, .ferramenta-arte, .cartao-modelo, .modelo, .pers, .mural-item, .quadro-destaque,
.briefing, .ed-linha, .ed-exportar, .soltar {
  background: linear-gradient(180deg, var(--vd-2), var(--vd-1));
  border: 1px solid var(--vd-borda);
  box-shadow: var(--vd-sombra);
}
.painel, .faq-lista details, .destaque, .resultados {
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
/* filete de luz na borda de cima dos blocos grandes */
.destaque, .painel, .numeros div, .plano { position: relative; }
.destaque::after, .painel::after, .numeros div::after, .plano::after {
  content: ""; position: absolute; inset: 0 12% auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--vd-luz), transparent);
}
.destaque { background: radial-gradient(90% 120% at 0% 0%, rgb(138 77 255 / 20%), transparent 60%), linear-gradient(180deg, var(--vd-2), var(--vd-1)); }

/* ---------- cartões: levantam e acendem no hover ---------- */
.ferramenta, .cartao-modelo, .modelo, .pers, .mural-item, .plano, .card {
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.ferramenta:hover .ferramenta-arte, .cartao-modelo:hover, .modelo:hover, .pers:hover, .mural-item:hover, .plano:hover, .card:hover {
  transform: translateY(-4px);
  border-color: rgb(164 107 255 / 40%);
  box-shadow: var(--vd-sombra), 0 20px 50px -20px rgb(138 77 255 / 55%);
}
.ferramenta-arte { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; overflow: hidden; }
.ferramenta-arte video, .ferramenta-arte img, .capa-video video { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ferramenta:hover .ferramenta-arte video, .ferramenta:hover .ferramenta-arte img { transform: scale(1.04); }

/* ---------- vídeos: nunca um bloco morto enquanto carregam ---------- */
.mv-peca, .capa-quadro, .ferramenta-arte, .mural-item, .capa-video {
  background-color: var(--fundo-2);
  background-image:
    linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 5%) 50%, transparent 70%),
    radial-gradient(80% 60% at 30% 20%, rgb(138 77 255 / 22%), transparent 70%),
    radial-gradient(70% 60% at 80% 90%, rgb(255 106 77 / 12%), transparent 70%);
  background-size: 220% 100%, 100% 100%, 100% 100%;
  animation: vd-brilho-carregando 2.4s linear infinite;
}
@keyframes vd-brilho-carregando { from { background-position: 120% 0, 0 0, 0 0; } to { background-position: -120% 0, 0 0, 0 0; } }
.mv-peca { border: 1px solid var(--vd-borda); box-shadow: 0 24px 60px -30px rgb(0 0 0 / 90%); overflow: hidden; }
.mv-peca video { transition: opacity .5s; }
.mv-peca:hover { border-color: rgb(164 107 255 / 45%); }
/* etiqueta do modelo sobre o vídeo: pílula de vidro */
.mv-peca span, .capa-legenda {
  background: rgb(11 11 14 / 45%); color: #fff;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 12%); border-radius: 999px;
}

/* ---------- números e FAQ ---------- */
.numeros div b, .numeros div strong {
  background: linear-gradient(180deg, #fff, #b994ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] .numeros div b, :root[data-theme="light"] .numeros div strong { background-image: linear-gradient(180deg, #2a1f5c, #7c3aed); }
.faq-lista details { transition: border-color .2s, background .2s; }
.faq-lista details[open] { border-color: rgb(164 107 255 / 35%); background: linear-gradient(180deg, rgb(138 77 255 / 10%), var(--vd-1)); }

/* ---------- campos ---------- */
.painel .campo, .briefing input, input[type="text"], input[type="search"], textarea, select {
  transition: border-color .2s, box-shadow .2s;
}
.painel .campo:focus-within, .briefing input:focus, textarea:focus, input[type="text"]:focus, select:focus {
  border-color: rgb(164 107 255 / 55%); box-shadow: 0 0 0 4px rgb(164 107 255 / 14%); outline: none;
}

/* ---------- rolagem e celular ---------- */
@media (max-width: 760px) {
  body::before { filter: none; animation: none; }
  .heroi::before { width: 120vw; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, .mv-peca, .capa-quadro, .ferramenta-arte, .mural-item, .capa-video { animation: none; }
  .pri, .ferramenta-arte, .cartao-modelo, .modelo, .pers, .mural-item, .plano, .card { transition: none; }
}

/* ---------- tema claro: correções ---------- */
:root[data-theme="light"] .hype span { color: var(--texto); }
:root[data-theme="light"] .mv-peca span, :root[data-theme="light"] .capa-legenda { background: rgb(255 255 255 / 70%); color: var(--texto); border-color: rgb(20 16 40 / 8%); }

/* ======================================================================
   Rodada 2 (09/10, 23h55): abas internas
   ====================================================================== */
/* caixas das abas Chat e Influencer viram vidro (as variáveis delas apontavam para o cinza chapado) */
#aba-influencer { --if-caixa: var(--vd-1); --if-borda: var(--vd-borda); }
[id^="aba-chat"], #aba-chat { --ch-caixa: var(--vd-1); --ch-borda: var(--vd-borda); }
.if-lista, .if-painel, .ch-lado, .ch-caixa-pedido, .ch-plano {
  box-shadow: var(--vd-sombra);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.ch-caixa-pedido { transition: border-color .2s, box-shadow .25s; }
.ch-caixa-pedido:focus-within { border-color: rgb(164 107 255 / 55%); box-shadow: var(--vd-brilho); }
.ch-sugestoes button { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s, border-color .2s, transform .2s; }
.ch-sugestoes button:hover { background: var(--vd-2); border-color: rgb(164 107 255 / 40%); transform: translateY(-1px); }
.ch-enviar { background: linear-gradient(180deg, #a06bff, #7a3df5); box-shadow: 0 8px 22px -8px rgb(138 77 255 / 80%); }

/* prévia vazia do influenciador: moldura de luz em vez de caixa morta */
.if-previa {
  background: radial-gradient(70% 55% at 50% 40%, rgb(138 77 255 / 16%), transparent 70%), linear-gradient(180deg, var(--vd-2), var(--vd-1));
  border: 1px dashed rgb(164 107 255 / 30%);
  box-shadow: var(--vd-sombra);
}
.if-previa .if-vazio i { border-color: rgb(164 107 255 / 40%); color: var(--neon-forte); box-shadow: 0 0 24px rgb(138 77 255 / 35%); }

/* rodapé "Gerar" grudado embaixo dos painéis: vidro, para o conteúdo passar por trás */
.gerar {
  background: color-mix(in srgb, var(--fundo-2) 72%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--vd-borda);
}

/* Nise Viral (aba Ganhar): barra das seções e estados vazios no mesmo vidro do resto */
:root[data-theme="dark"] #aba-ganhar, :root:not([data-theme="light"]) #aba-ganhar { --ap-vidro: rgb(11 11 14 / 55%); }
.ap-vazio {
  background: radial-gradient(80% 90% at 50% 0%, rgb(138 77 255 / 14%), transparent 65%), linear-gradient(180deg, var(--vd-2), var(--vd-1));
  border: 1px solid var(--vd-borda);
}

/* estados vazios gerais */
.vazio-arte { box-shadow: 0 30px 80px -30px rgb(138 77 255 / 70%); }

/* cartões de resultado: legenda mais legível e ações discretas */
.card .info p { color: var(--texto); font-weight: 600; }
.card .meta { opacity: .75; }

/* canvas: nós e barras flutuantes em vidro */
.cv-no { box-shadow: var(--vd-sombra), 0 0 0 1px var(--vd-borda); }
.cv-flutua, .cv-ferramentas { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* cartões da galeria e dos resultados: brilho de carregamento atrás do vídeo (antes ficava preto) */
.card .midia {
  background-color: var(--fundo-2);
  background-image:
    linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 5%) 50%, transparent 70%),
    radial-gradient(80% 60% at 30% 20%, rgb(138 77 255 / 22%), transparent 70%),
    radial-gradient(70% 60% at 80% 90%, rgb(255 106 77 / 12%), transparent 70%);
  background-size: 220% 100%, 100% 100%, 100% 100%;
  animation: vd-brilho-carregando 2.4s linear infinite;
}
.card .midia video { background: transparent; }
.card .etiqueta { background: rgb(11 11 14 / 45%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgb(255 255 255 / 12%); }
@media (prefers-reduced-motion: reduce) { .card .midia { animation: none; } }

/* menu: o logo novo ficou mais largo e "Planos" era cortado em telas de notebook (1536 px) */
@media (max-width: 1640px) {
  .abas button { padding: 8px 8px; font-size: 14.5px; }
  .topo { gap: 16px; }
}
/* quando ainda não couber, o menu rola de lado sem barra de rolagem aparente */
.abas { scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }