/* John's Company · liquid glass dos cards (28/10, pedido do João). Aproximação web de vidro (backdrop-filter), não o material da Apple.
   Fonte: DS v5 02-direcao §2.1. Aplicação de referência: raio-X do Apolo (_trabalho/ref-raiox/raiox.css .rx-vb).
   B = vidro escuro: estrutura da receita B do DS (âmbar soft-light, grão, lábio claro em cima e ouro embaixo, borda luz→ouro por máscara).
       Véu e brilho seguem o raio-X (brightness .55; véu subido para .82→.90 pela medição): o B do DS (.42→.60, .92) foi medido sobre fundo escuro; sobre o off-white o branco cai abaixo de 4,5 (03-vidro.md).
   C = vidro claro creme: fosco claro do DS (blur 24, sat 120, véu .72, lábio branco em cima e ouro embaixo) + borda de ouro 1,5 px do portal. Só sobre material claro com luz (mesh claro); sobre papel liso vira elevado; nunca sobre azul.
   Texto sobre vidro: sempre opaco. Não anima backdrop-filter. Este arquivo só sobrepõe classes que já existem (index.html, partes.css). */
/* 06/11 (vidro global): o card do topo e a moldura do bento saíram daqui (glass-sistema.css: G2 e G3). O que sobra é dívida: cada peça vira G3 ou G4 (VIDRO-GLOBAL.md). */

/* ── tokens locais ─────────────────────────────────────────── */
.q-palco.cenas,.q-palco.comparar,.q-palco.dg,.q-palco.fecho,.cf-mesa,.valores,.dg .cartao{
  --vb-veu1:.82;--vb-veu2:.9;
  --vb-filtro:blur(28px) saturate(160%) brightness(.55);
  --vb-reflexo:.2;
  --vb-fundo:linear-gradient(118deg,rgb(255 255 255 / var(--vb-reflexo)) 0%,rgb(255 255 255 / .06) 22%,rgb(255 255 255 / 0) 38%),
    radial-gradient(55% 35% at 0% 100%,rgb(255 229 86 / .16),rgb(255 229 86 / 0) 70%),
    radial-gradient(80% 55% at 100% 100%,rgb(62 155 211 / .26),rgb(62 155 211 / 0) 70%),
    url('../assets/texturas/grao-160.png'),
    linear-gradient(160deg,rgb(217 174 76 / .06),rgb(217 174 76 / 0) 55%),
    linear-gradient(160deg,rgb(14 61 89 / var(--vb-veu1)),rgb(14 61 89 / var(--vb-veu2)));
  --vb-labios:inset 0 1.5px 0 rgb(255 255 255 / .62),inset 0 -1.5px 0 rgb(240 208 122 / .55),inset 0 0 0 1px rgb(255 255 255 / .14),inset 0 26px 34px -26px rgb(255 255 255 / .28);
  /* tinta no escuro (DS §2.2): título branco, corpo apoio-claro, secundário opaco; número em vidro = ouro-claro (F11) */
  --titulo:#FFFFFF;--corpo:#EAF3F6;--texto-secundario:#EAF3F6;--p-sobre-palco:#EAF3F6;--p-sobre-palco-2:#EAF3F6;
  --p-fio:rgb(207 227 234 / .18);
  /* botão primário no escuro (DS §2.3): degradê oficial com texto noite */
  --botao-fundo:linear-gradient(180deg,#FFE556 0%,#EBC54F 55%,#D9AE4C 100%);--botao-tinta:#0D2533;
  --botao-sombra:inset 0 1px 0 rgb(255 255 255 / .75),inset 0 -2px 0 rgb(120 80 10 / .25),0 10px 30px -8px rgb(255 214 80 / .45),0 0 0 1px rgb(255 229 86 / .35);
  --botao-sombra-hover:inset 0 1px 0 rgb(255 255 255 / .8),inset 0 -2px 0 rgb(120 80 10 / .25),0 18px 44px -10px rgb(255 214 80 / .6),0 0 0 1px rgb(255 229 86 / .5);
  --botao-disco:transparent;--botao-disco-tinta:#0D2533;--botao-recuo:28px;
}

/* ── B: vidro escuro ───────────────────────────────────────── */
.q-palco.cenas,.q-palco.comparar,.q-palco.dg,.q-palco.fecho,.cf-mesa,.valores,.dg .cartao{
  isolation:isolate;color:var(--corpo);background:var(--vb-fundo);
  box-shadow:var(--vb-labios),var(--sombra-1)}
/* borda de ouro 1,5 px por máscara: .vidro e .vidro-b já a desenham no ::before; os outros usam o ::after livre */
.dg .cartao::before{padding:1.5px;background:var(--borda-ouro)}
.q-palco.cenas::after,.q-palco.comparar::after,.q-palco.dg::after,.q-palco.fecho::after,.cf-mesa::after,.valores::after{
  content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;padding:1.5px;pointer-events:none;background:var(--borda-ouro);
  -webkit-mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);-webkit-mask-composite:xor;mask:linear-gradient(white 0 0) content-box exclude,linear-gradient(white 0 0)}
.valores{position:relative}
@media (max-width:1100px){.cf-mesa{position:relative;top:auto}}
/* palco grande: o reflexo diagonal cobre centenas de px e passa atrás do texto do canto; fica mais fraco (medido) */
.q-palco.cenas,.q-palco.comparar,.q-palco.dg,.q-palco.fecho{--vb-reflexo:.08}
/* cartão da parte 6: B dentro do palco B (escuro sobre escuro; o claro nunca vai sobre azul, DS §2.1) */
.dg .cartao{--vb-veu1:.58;--vb-veu2:.72;--vb-filtro:blur(20px) saturate(160%) brightness(.92)}

/* parte 1: o painel abaixo das mãos */
.topo__acao .jc-lead,.topo__acao .jc-link-seta{color:#FFFFFF}   /* o link "Ver o Mapa da Área" (06/11) também vai sobre o vidro escuro */
.topo__apoio{border-top-color:rgb(207 227 234 / .2)}

/* parte 5: a mesa dos documentos vira vidro; os documentos seguem papel opaco */
.cf-mesa{padding:20px;border-radius:var(--raio-painel-j)}
/* papel opaco dentro do vidro (documento, planilha, conversa): volta a tinta do claro */
.cf-mesa .doc,.q-palco .plan,.q-palco .fone__fio{--titulo:#0E3D59;--texto-secundario:#475A65;--p-fio:rgb(14 61 89 / .12)}
.cf-mesa .doc::after{background:linear-gradient(225deg,rgb(14 61 89 / .9) 50%,var(--p-dobra) 50%)}

/* parte 7: o cartão do preço */
.valores{--vb-veu1:.88;--vb-veu2:.94;margin:32px 0 0;padding:4px 28px;list-style:none;border-radius:var(--raio-painel-j)}
.valores .valor{border-top-color:rgb(207 227 234 / .18)}
.valores .valor:first-child{border-top:0}
.valores .valor:last-child{border-bottom:0}
.valores .valor__n{color:var(--ouro-claro)}

/* ── C: vidro claro creme, para dado e pílula ──────────────── */
.ancora,.chip:not([aria-pressed="true"]),.selos li,.degrau-p.vidro{
  background:radial-gradient(120% 70% at 18% 0%,rgb(255 255 255 / .55),transparent 60%),linear-gradient(rgb(246 243 238 / .72),rgb(246 243 238 / .72));
}
.chip:not([aria-pressed="true"]),.selos li{box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1px 0 rgb(217 174 76 / .35),inset 0 0 0 1px rgb(217 174 76 / .7)}
.selos li{color:var(--teal-profundo)}
@media (hover:hover) and (pointer:fine){.chip:hover:not([aria-pressed="true"]){background:linear-gradient(rgb(255 255 255 / .9),rgb(255 255 255 / .9))}}
/* ancora (valor de mercado): bloco de dado, cartão creme com borda de ouro */
.ancora{position:relative;isolation:isolate;padding:24px 24px 22px;border-top:0;border-radius:var(--raio-painel-j);box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1px 0 rgb(217 174 76 / .35),var(--sombra-1)}
.ancora::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1.5px;pointer-events:none;background:var(--borda-ouro);
  -webkit-mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);-webkit-mask-composite:xor;mask:linear-gradient(white 0 0) content-box exclude,linear-gradient(white 0 0)}

/* ── papel liso (.q-papel): o vidro claro some sobre off-white liso, então vira ELEVADO (DS §2.1): branco + sombra-1, borda de ouro mantida.
   O mesh de luz atrás (mesh-portal) foi testado e derruba o texto secundário da seção para ~3,7 sob a luz teal; ficou fora. ── */
.q-papel .ancora,.q-papel .chip:not([aria-pressed="true"]),.q-papel .degrau-p.vidro{background:#FFFFFF}
.q-papel .chip:not([aria-pressed="true"]){box-shadow:inset 0 0 0 1px rgb(217 174 76 / .7),var(--sombra-1)}
.q-papel .degrau-p.vidro{box-shadow:var(--sombra-1)}

/* ── celular: blur menor (DS §2.1) e mesa sem sangria ───────── */
@media (max-width:760px){
  .q-palco.cenas,.q-palco.comparar,.q-palco.dg,.q-palco.fecho,.cf-mesa,.valores{--vb-filtro:blur(16px) saturate(150%) brightness(.55)}
  .q-palco.cenas,.q-palco.comparar,.q-palco.dg,.q-palco.fecho{--vb-reflexo:0}
  .cf-mesa{margin-inline:0;padding:16px}
  /* a mesa rola na horizontal: o ::after rolaria junto; a borda vira sombra interna */
  .cf-mesa::after{display:none}
  .cf-mesa{box-shadow:var(--vb-labios),inset 0 0 0 1.5px rgb(217 174 76 / .7),var(--sombra-1)}
  .valores{padding:0 20px}
  .ancora{padding:20px 18px}
}

/* ── acessibilidade: transparência reduzida e contraste alto = véu sólido ── */
@media (prefers-reduced-transparency:reduce){
  .q-palco.cenas,.q-palco.comparar,.q-palco.dg,.q-palco.fecho,.cf-mesa,.valores,.dg .cartao{background:rgb(14 61 89 / .97)}
  .ancora,.chip:not([aria-pressed="true"]),.selos li,.degrau-p.vidro,.q-papel .ancora,.q-papel .chip:not([aria-pressed="true"]),.q-papel .degrau-p.vidro{background:var(--off-white-placa)}
}
@media (prefers-contrast:more){
  .q-palco.cenas,.q-palco.comparar,.q-palco.dg,.q-palco.fecho,.cf-mesa,.valores,.dg .cartao{background:rgb(14 61 89 / .97);box-shadow:inset 0 0 0 2px var(--ouro-claro)}
  .ancora,.chip:not([aria-pressed="true"]),.selos li,.degrau-p.vidro,.q-papel .ancora,.q-papel .chip:not([aria-pressed="true"]),.q-papel .degrau-p.vidro{background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--teal-profundo)}
}