/* CONF.IA — landing: vidro como moldura das imagens (teste 21/09/2026, APROVADO no mesmo dia).
   Vale com <html class="vidro">, fixo no index. Desfazer = tirar a classe do <html>.

   Mesma receita do vidro do sistema (ui-glass): quase branco, SEM contorno, a cor entra como um sopro.
   Vidro só existe com algo atrás — por isso cada moldura leva a própria névoa colorida.

   Por que a moldura é montada em pseudo-elementos, e não no próprio cartão: a galeria anima com transform
   (.sobe), e transform cria contexto de empilhamento — um fundo com z-index negativo iria pintar POR CIMA do
   fundo do cartão. Com isolation:isolate a ordem fica garantida em qualquer caso:
     ::before (z -2) névoa  →  ::after (z -1) vidro  →  a imagem. */

.vidro .cena .quadro,
.vidro .arte,
.vidro .peca{
  position:relative; isolation:isolate; overflow:visible;
  background:transparent; box-shadow:none;
  padding:12px; border-radius:var(--r-g);
}

/* névoa atrás do vidro: vermelho da marca bem fraco + dois tons frios, desfocados */
.vidro .cena .quadro::before,
.vidro .arte::before,
.vidro .peca::before{
  content:""; position:absolute; inset:-26px -30px; z-index:-2; pointer-events:none;
  border-radius:40%;
  background:
    radial-gradient(38% 46% at 18% 30%, rgba(205,65,70,.30), transparent 70%),
    radial-gradient(42% 50% at 82% 24%, rgba(99,102,241,.24), transparent 70%),
    radial-gradient(46% 52% at 60% 88%, rgba(20,184,166,.20), transparent 72%);
  filter:blur(28px);
}

/* o vidro: gradiente quase branco + desfoque, sombra macia, nenhuma borda nem filete interno */
.vidro .cena .quadro::after,
.vidro .arte::after,
.vidro .peca::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(155deg, rgba(255,255,255,.74), rgba(255,255,255,.46) 58%, rgba(255,255,255,.62));
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
  box-shadow:0 18px 44px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05);
}

/* a imagem dentro da moldura: canto menor que o de fora (30 − 12 de respiro ≈ 18) */
.vidro .cena .quadro img,
.vidro .arte img,
.vidro .peca img{border-radius:18px}

/* legenda da tela real: sai da faixa cinza e passa a morar no próprio vidro */
.vidro .arte .rodape-img{background:transparent; padding:10px 6px 0}

/* galeria: seis cartões lado a lado — névoa mais curta para não virar uma mancha só */
.vidro .peca::before{inset:-12px -14px; filter:blur(22px); opacity:.75}
.vidro .peca .txt{padding:18px 12px 12px}
.vidro .peca:hover{box-shadow:none}
.vidro .peca:hover::after{box-shadow:0 26px 54px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.05)}

/* abertura: moldura um pouco mais larga, é a peça principal da página */
.vidro .cena .quadro{padding:14px}
.vidro .cena .quadro::before{inset:-40px -48px; filter:blur(38px)}

@media(max-width:700px){
  .vidro .cena .quadro, .vidro .arte, .vidro .peca{padding:8px; border-radius:22px}
  .vidro .cena .quadro img, .vidro .arte img, .vidro .peca img{border-radius:15px}
  .vidro .cena .quadro::before, .vidro .arte::before{inset:-16px -12px; filter:blur(22px)}
}

/* sem desfoque disponível ou pedido de menos transparência: vidro vira quase opaco, névoa some */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vidro .cena .quadro::after, .vidro .arte::after, .vidro .peca::after{background:rgba(255,255,255,.9)}
}
@media (prefers-reduced-transparency:reduce){
  .vidro .cena .quadro::before, .vidro .arte::before, .vidro .peca::before{display:none}
  .vidro .cena .quadro::after, .vidro .arte::after, .vidro .peca::after{background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none}
}

/* a névoa passa da borda da tela em janelas estreitas: corta sem criar rolagem lateral (clip não quebra o
   topo fixo, hidden quebraria) */
html.vidro, .vidro body{overflow-x:clip}

/* agente: o celular da conversa não ganha moldura (é aparelho), só a névoa atrás, para conversar com as
   telas emolduradas da página */
.vidro .palco::before{
  content:""; position:absolute; inset:-10px 6% 30px; z-index:-1; pointer-events:none; border-radius:40%;
  background:
    radial-gradient(40% 40% at 25% 30%, rgba(205,65,70,.26), transparent 70%),
    radial-gradient(45% 45% at 78% 40%, rgba(99,102,241,.22), transparent 70%),
    radial-gradient(50% 45% at 50% 90%, rgba(20,184,166,.18), transparent 72%);
  filter:blur(34px);
}
.vidro .palco{isolation:isolate}