/* John's Company · sistema de liquid glass do site (06/11/2026). Especificação: revisao-0611/GLASS-SISTEMA.md. Aplicação: revisao-0611/construcao/VIDRO-GLOBAL.md.
   Carrega POR ÚLTIMO (depois de fde.css). Aproximação web do vidro "regular" da Apple; não é o material oficial.
   ROTA HÍBRIDA (escolha do João, §13): <body class="lg-rota-hibrida">.
   - CTA principal: vidro AMARELO #FFE556 vivo; ouro #D9AE4C só no lábio e no contorno.
   - Barra: teal só sobre fundo escuro; no claro, vidro neutro (a barra é a .jc-nav: os valores do G1 estão em glass.css, por data-modo).
   - Chips e chat: vidro neutro; teal só no selecionado, no item ativo, no foco e nos links.
   - Selos de decisão (.lg-decisao: 12x, garantia, crédito): teal + amarelo.
   - Fios, linhas, pulsos e luz ambiente: teal com toques de amarelo (tokens --lg-fio*, --lg-pulso).
   Quatro níveis. Só G1 e G2 usam backdrop-filter real; G3 e G4 são vidro PINTADO (sem filtro).
   Modo: toda peça leva .lg-claro ou .lg-escuro (o vidro não adivinha o fundo; a seção decide).
   WebKit: var() dentro de -webkit-backdrop-filter computa "none" (glass.css l.34). Por isso todo filtro aqui é literal.
   Sombra nunca usa rgb(0 0 0) (DS v5 §2.4): usa rgb(6 30 46) no escuro e rgb(14 61 89) no claro. */

:root{
  /* mola criticamente amortecida, sem overshoot (a mesma de glass.css) */
  --lg-mola:linear(0,.09,.264,.442,.594,.713,.801,.864,.908,.939,.96,.973,.983,.989,.993,.995,1);
  --lg-t-toque:120ms;--lg-t-volta:420ms;--lg-t-acende:280ms;
  /* fios e pulsos (hub, quebra-cabeça, organograma): teal vivo no claro, teal claro no escuro (#1C6794 sobre noite dá ~2,8:1 e some); pulso amarelo */
  --lg-fio:#1C6794;--lg-fio-escuro:#3E9BD3;--lg-pulso:#FFE556;
  --lg-pulso-brilho:0 0 8px rgb(255 229 86 / .75),0 0 2px rgb(255 229 86 / .9);
}

/* ══ base comum ═══════════════════════════════════════════════════════════════════════════════════ */
.lg-1,.lg-2,.lg-3,.lg-4{position:relative;isolation:isolate;color:var(--lg-tinta);
  background:var(--lg-veu);
  box-shadow:inset 0 1px 0 var(--lg-aro-cima),inset 0 -1px 0 var(--lg-aro-baixo),inset 0 0 0 1px var(--lg-borda),
    var(--lg-brilho-interno),var(--lg-sombra)}
/* reflexo especular: luz de cima à esquerda, some antes do texto */
.lg-1::before,.lg-2::before,.lg-3::before,.lg-4::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgb(255 255 255 / var(--lg-spec)) 0%,rgb(255 255 255 / calc(var(--lg-spec) * .3)) 22%,rgb(255 255 255 / 0) 40%)}

/* ══ G1 · controle flutuante (backdrop real) ══════════════════════════════════════════════════════
   A barra do site é a .jc-nav (glass.css, por data-modo). Estas classes ficam para outro controle flutuante. Rota híbrida:
   claro neutro, escuro teal. */
.lg-1{border-radius:999px}
.lg-1.lg-claro{--lg-veu:rgb(246 243 238 / .76);--lg-tinta:#0D2533;--lg-tinta-2:#0D2533;--lg-foco:#1C6794;
  --lg-aro-cima:rgb(255 255 255 / .95);--lg-aro-baixo:rgb(14 61 89 / .16);--lg-borda:rgb(14 61 89 / .08);--lg-spec:.5;
  --lg-brilho-interno:inset 0 0 0 0 transparent;--lg-sombra:0 1px 2px rgb(14 61 89 / .08),0 10px 28px -14px rgb(14 61 89 / .24);
  --lg-acende:rgb(255 255 255 / .9);
  -webkit-backdrop-filter:blur(16px) saturate(170%) brightness(1.06);backdrop-filter:blur(16px) saturate(170%) brightness(1.06)}
.lg-1.lg-escuro{--lg-veu:rgb(18 72 104 / .7);--lg-tinta:#FFFFFF;--lg-tinta-2:#FFFFFF;--lg-foco:#FFE556;
  --lg-aro-cima:rgb(62 155 211 / .8);--lg-aro-baixo:rgb(62 155 211 / .3);--lg-borda:rgb(62 155 211 / .28);--lg-spec:.16;
  --lg-brilho-interno:inset 0 0 0 0 transparent;--lg-sombra:0 1px 2px rgb(6 30 46 / .3),0 14px 34px -14px rgb(6 30 46 / .55);
  --lg-acende:rgb(62 155 211 / .5);
  -webkit-backdrop-filter:blur(16px) saturate(170%) brightness(.4);backdrop-filter:blur(16px) saturate(170%) brightness(.4)}
/* item ativo e link: tint teal; o texto não muda de cor */
.lg-ativo{border-radius:999px;background:rgb(28 103 148 / .12);box-shadow:inset 0 0 0 1.5px rgb(28 103 148 / .5)}
.lg-escuro .lg-ativo{background:rgb(255 255 255 / .08);box-shadow:inset 0 0 0 1.5px rgb(62 155 211 / .85)}
.lg-link{color:inherit;text-decoration:underline;text-decoration-color:#1C6794;text-decoration-thickness:2px;text-underline-offset:3px}
.lg-escuro .lg-link{text-decoration-color:#3E9BD3}

/* ══ G2 · painel de destaque (backdrop real) ══════════════════════════════════════════════════════
   Card do topo, organograma, manchete do FDE (≥ 1100 px), janela do chat aberta. Escuro: só texto BRANCO (P2).
   --lg-filtro: a lente do glass.js monta backdrop-filter:url(#lente) var(--lg-filtro); sem ele a declaração fica inválida.
   O reflexo de cima segue o ponteiro (--lg-px, glass.js §4; só mouse). */
.lg-2{border-radius:var(--raio-painel-j,24px 24px 24px 5px)}
.lg-2.lg-escuro{--lg-filtro:blur(9px) saturate(200%) brightness(.36);
  --lg-veu:radial-gradient(48% 70px at calc(50% + var(--lg-px,0%)) -10px,rgb(255 255 255 / .26),rgb(255 255 255 / 0) 72%),
    linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / 0) 40px),linear-gradient(160deg,rgb(14 61 89 / .60),rgb(14 61 89 / .68));
  --lg-tinta:#FFFFFF;--lg-tinta-2:#FFFFFF;--lg-foco:#FFE556;
  --lg-aro-cima:rgb(255 255 255 / .55);--lg-aro-baixo:rgb(240 208 122 / .4);--lg-borda:rgb(255 255 255 / .10);--lg-spec:.12;
  --lg-brilho-interno:inset 0 28px 44px -30px rgb(255 255 255 / .28),inset 0 -20px 40px -30px rgb(28 103 148 / .35);
  --lg-sombra:0 2px 6px rgb(6 30 46 / .3),0 30px 70px -34px rgb(6 30 46 / .6);--lg-acende:rgb(207 227 234 / .3);
  /* tinta da página dentro do painel (os componentes leem estes tokens) */
  --titulo:#FFFFFF;--corpo:#FFFFFF;--texto-secundario:#FFFFFF;--secundario:#FFFFFF;
  -webkit-backdrop-filter:blur(9px) saturate(200%) brightness(.36);backdrop-filter:blur(9px) saturate(200%) brightness(.36)}
.lg-2.lg-claro{--lg-veu:linear-gradient(180deg,rgb(255 255 255 / .5),rgb(255 255 255 / 0) 30%),linear-gradient(rgb(242 245 247 / .78),rgb(242 245 247 / .78));
  --lg-tinta:#0D2533;--lg-tinta-2:#0E3D59;--lg-foco:#1C6794;
  --lg-aro-cima:rgb(255 255 255 / .9);--lg-aro-baixo:rgb(217 174 76 / .35);--lg-borda:rgb(14 61 89 / .12);--lg-spec:.45;
  --lg-brilho-interno:inset 0 -24px 40px -32px rgb(28 103 148 / .14);
  --lg-sombra:0 2px 6px rgb(14 61 89 / .08),0 32px 64px -28px rgb(14 61 89 / .28);--lg-acende:rgb(255 255 255 / .9);
  -webkit-backdrop-filter:blur(24px) saturate(120%) brightness(1.08);backdrop-filter:blur(24px) saturate(120%) brightness(1.08)}
/* a borda acende sob o mouse */
@media (hover:hover) and (pointer:fine){.lg-2.lg-escuro:hover{--lg-aro-cima:rgb(255 255 255 / .9);--lg-aro-baixo:rgb(255 229 86 / .7)}}
.lg-2{transition:box-shadow 360ms var(--m-entra,ease-out)}

/* ══ G3 · card pintado (sem filtro) ═══════════════════════════════════════════════════════════════ */
.lg-3{border-radius:var(--raio-painel,24px)}
/* G3 e G4 são vidro pintado: sem filtro, mesmo se uma regra antiga (ex.: site.css .degrau) trouxer um */
.lg-3,.lg-4{-webkit-backdrop-filter:none;backdrop-filter:none}
.lg-3.lg-escuro{--lg-veu:radial-gradient(70% 60% at 100% 100%,rgb(28 103 148 / .08),rgb(28 103 148 / 0) 70%),linear-gradient(160deg,rgb(14 61 89 / .92),rgb(14 61 89 / .94)),linear-gradient(rgb(6 30 46 / .3),rgb(6 30 46 / .3));
  --lg-tinta:#FFFFFF;--lg-tinta-2:#CFE3EA;--lg-foco:#FFE556;
  --lg-aro-cima:rgb(255 255 255 / .5);--lg-aro-baixo:rgb(240 208 122 / .45);--lg-borda:rgb(255 255 255 / .10);--lg-spec:.07;
  --lg-brilho-interno:inset 0 22px 34px -26px rgb(255 255 255 / .18);
  --lg-sombra:0 2px 6px rgb(6 30 46 / .3),0 24px 60px -24px rgb(6 30 46 / .6);--lg-acende:rgb(207 227 234 / .28)}
.lg-3.lg-claro{--lg-veu:linear-gradient(180deg,rgb(255 255 255 / .8),rgb(246 243 238 / .86));
  --lg-tinta:#0D2533;--lg-tinta-2:#0E3D59;--lg-foco:#1C6794;
  --lg-aro-cima:#FFFFFF;--lg-aro-baixo:rgb(217 174 76 / .35);--lg-borda:rgb(14 61 89 / .10);--lg-spec:.6;
  --lg-brilho-interno:inset 0 -18px 30px -26px rgb(28 103 148 / .10);
  --lg-sombra:0 1px 2px rgb(14 61 89 / .06),0 12px 32px -16px rgb(14 61 89 / .18);--lg-acende:rgb(255 255 255 / .95)}
/* moldura (bento): sem texto em cima, véu fino; as peças de dentro são conteúdo opaco */
.lg-3.lg-moldura.lg-escuro{--lg-veu:radial-gradient(70% 60% at 100% 100%,rgb(28 103 148 / .22),rgb(28 103 148 / 0) 70%),linear-gradient(160deg,rgb(14 61 89 / .12),rgb(14 61 89 / .26))}
/* destaque (preço, card principal): lábio de ouro de 2 px */
.lg-3.lg-destaque{--lg-aro-baixo:rgb(217 174 76 / .9);
  box-shadow:inset 0 1px 0 var(--lg-aro-cima),inset 0 -2px 0 var(--lg-aro-baixo),inset 0 0 0 1px rgb(217 174 76 / .35),
    var(--lg-brilho-interno),0 2px 6px rgb(14 61 89 / .08),0 32px 64px -28px rgb(14 61 89 / .28)}
.lg-3.lg-destaque.lg-escuro{box-shadow:inset 0 1px 0 var(--lg-aro-cima),inset 0 -2px 0 var(--lg-aro-baixo),inset 0 0 0 1px rgb(217 174 76 / .35),
    var(--lg-brilho-interno),0 2px 6px rgb(6 30 46 / .3),0 40px 80px -30px rgb(28 103 148 / .8)}

/* ══ G4 · chip, disco, pílula (pintado). Rota híbrida: neutro; teal só no .lg-ativo ════════════════ */
.lg-4{border-radius:999px}
.lg-4.lg-escuro{--lg-veu:linear-gradient(180deg,rgb(255 255 255 / .10),rgb(255 255 255 / 0) 60%),linear-gradient(rgb(24 32 38 / .78),rgb(24 32 38 / .78));
  --lg-tinta:#FFFFFF;--lg-tinta-2:#FFFFFF;--lg-foco:#FFE556;
  --lg-aro-cima:rgb(255 255 255 / .4);--lg-aro-baixo:rgb(255 255 255 / .08);--lg-borda:rgb(255 255 255 / .14);--lg-spec:.12;
  --lg-brilho-interno:inset 0 0 0 0 transparent;--lg-sombra:0 1px 2px rgb(6 30 46 / .3);--lg-acende:rgb(207 227 234 / .4)}
.lg-4.lg-claro{--lg-veu:rgb(255 255 255 / .8);--lg-tinta:#0D2533;--lg-tinta-2:#0D2533;--lg-foco:#1C6794;
  --lg-aro-cima:#FFFFFF;--lg-aro-baixo:rgb(14 61 89 / .10);--lg-borda:rgb(14 61 89 / .10);--lg-spec:.6;
  --lg-brilho-interno:inset 0 0 0 0 transparent;--lg-sombra:0 1px 2px rgb(14 61 89 / .08);--lg-acende:#FFFFFF}
.lg-4.lg-ativo{--lg-borda:rgb(28 103 148 / .7);background:linear-gradient(rgb(28 103 148 / .14),rgb(28 103 148 / .14)),var(--lg-veu)}
.lg-4.lg-escuro.lg-ativo{--lg-borda:rgb(62 155 211 / .9)}
.lg-4.lg-campo{border-radius:var(--raio-m,8px)}
.lg-4.lg-campo[aria-invalid="true"]{--lg-borda:#B3261E;box-shadow:inset 0 0 0 1.5px var(--lg-borda),var(--lg-sombra)}
.lg-4.lg-campo.lg-escuro[aria-invalid="true"]{--lg-borda:#FF6B66}

/* ══ interação (peça de vidro que se toca e não é .jc-botao). glass.js grava --gx/--gy e [data-aceso] ═══ */
.lg-toque{--lg-escala:.96;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--lg-t-volta) var(--lg-mola),box-shadow 260ms var(--m-entra,ease-out)}
.lg-3.lg-toque{--lg-escala:.98}
.lg-toque::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side circle at var(--gx,50%) var(--gy,50%),var(--lg-acende),transparent) no-repeat;
  background-size:240% 240%;background-position:var(--gx,50%) var(--gy,50%);transition:opacity var(--lg-t-acende) ease-out}
.lg-toque:active,.lg-toque[data-aceso]{transform:scale(var(--lg-escala));transition-duration:var(--lg-t-toque)}
.lg-toque:active::after,.lg-toque[data-aceso]::after{opacity:1;transition-duration:80ms}
@media (hover:hover) and (pointer:fine){
  .lg-toque:hover{--lg-aro-cima:rgb(255 255 255 / .95)}
  .lg-toque.lg-escuro:hover{--lg-aro-baixo:rgb(255 229 86 / .6)}
}
.lg-toque:focus-visible,.lg-1:focus-visible,.lg-4:focus-visible{outline:var(--foco-largura,2px) solid var(--lg-foco);outline-offset:var(--foco-desloc,3px)}
.lg-toque:disabled,.lg-toque[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.lg-toque:disabled::after,.lg-toque[aria-disabled="true"]::after{display:none}

/* ══ botões ═══════════════════════════════════════════════════════════════════════════════════════
   CTA principal = TODO .jc-botao (menos o secundário .jc-botao--vidro). Os tokens ficam no próprio botão: vencem os --botao-*
   que vidro.css redefine nos contêineres. glass.css deixou de pintar o botão com valores fixos.
   Vidro tingido de amarelo vivo #FFE556; ouro #D9AE4C só no lábio de baixo e no contorno. Texto noite (≥ 7,72:1 no pior pixel).
   Padrão = variante clara (sem brilho, sombra teal). Brilho amarelo só no escuro e um por tela: card do topo, fecho, chat. */
.jc-botao:not(.jc-botao--vidro){
  --botao-fundo:radial-gradient(120% 90% at 50% -20%,rgb(255 248 200 / .7),rgb(255 248 200 / 0) 60%),linear-gradient(180deg,rgb(255 236 120 / .92) 0%,rgb(255 229 86 / .94) 50%,rgb(255 222 70 / .97) 100%);
  --botao-tinta:#0D2533;--botao-disco:transparent;--botao-disco-tinta:#0D2533;
  --botao-sombra:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1.5px 0 rgb(217 174 76 / .95),inset 0 0 0 1px rgb(217 174 76 / .55),
    inset 0 0 14px rgb(255 246 200 / .45),0 1px 2px rgb(14 61 89 / .10),0 12px 28px -14px rgb(14 61 89 / .3);
  --botao-sombra-hover:inset 0 1px 0 #FFFFFF,inset 0 -1.5px 0 rgb(217 174 76 / .95),inset 0 0 0 1px rgb(217 174 76 / .7),
    inset 0 0 18px rgb(255 246 200 / .6),0 2px 6px rgb(14 61 89 / .12),0 20px 40px -18px rgb(14 61 89 / .36);
  --botao-sombra-toque:inset 0 1px 0 #FFFFFF,inset 0 -1.5px 0 rgb(217 174 76 / .95),inset 0 0 0 1px rgb(217 174 76 / .8),
    inset 0 0 22px rgb(255 252 230 / .85),0 1px 2px rgb(14 61 89 / .12)}
/* escuro, com o brilho da tela */
:is(.topo__acao,#proximo-passo,.chat__painel) .jc-botao:not(.jc-botao--vidro){
  --botao-sombra:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1.5px 0 rgb(217 174 76 / .95),inset 0 0 0 1px rgb(217 174 76 / .5),
    inset 0 0 14px rgb(255 250 215 / .5),0 1px 2px rgb(6 30 46 / .3),0 10px 30px -8px rgb(255 229 86 / .45);
  --botao-sombra-hover:inset 0 1px 0 #FFFFFF,inset 0 -1.5px 0 rgb(217 174 76 / .95),inset 0 0 0 1px rgb(217 174 76 / .7),
    inset 0 0 18px rgb(255 250 215 / .65),0 1px 2px rgb(6 30 46 / .3),0 18px 44px -10px rgb(255 229 86 / .6);
  --botao-sombra-toque:inset 0 1px 0 #FFFFFF,inset 0 -1.5px 0 rgb(217 174 76 / .95),inset 0 0 0 1px rgb(217 174 76 / .8),
    inset 0 0 22px rgb(255 252 230 / .85),0 1px 2px rgb(6 30 46 / .3),0 8px 22px -8px rgb(255 229 86 / .5)}
/* escuro sem brilho (rodapé e barra escura: o brilho já é do fecho ou do topo na mesma tela) */
:is(.rodape,.jc-nav[data-modo="escuro"]) .jc-botao:not(.jc-botao--vidro){
  --botao-sombra:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1.5px 0 rgb(217 174 76 / .95),inset 0 0 0 1px rgb(217 174 76 / .5),
    inset 0 0 14px rgb(255 250 215 / .5),0 1px 2px rgb(6 30 46 / .3),0 8px 20px -10px rgb(6 30 46 / .6)}
/* secundário (.jc-botao--vidro, hoje só no fim do chat): vidro neutro PINTADO, sem cor e sem filtro (não há vidro sobre vidro) */
.jc-botao--vidro{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  --botao-fundo:linear-gradient(180deg,rgb(255 255 255 / .7),rgb(255 255 255 / .55));--botao-tinta:#0D2533;
  --b-labio:inset 0 1px 0 #FFFFFF,inset 0 0 0 1px rgb(14 61 89 / .14);--b-contato:0 1px 2px rgb(14 61 89 / .08);
  --botao-sombra:0 1px 2px rgb(14 61 89 / .08);--botao-sombra-hover:0 12px 24px -14px rgb(14 61 89 / .3)}
:is([data-modo="escuro"],.chat__painel) .jc-botao--vidro{
  --botao-fundo:linear-gradient(180deg,rgb(255 255 255 / .10),rgb(255 255 255 / 0) 60%),linear-gradient(rgb(14 61 89 / .86),rgb(14 61 89 / .86));
  --botao-tinta:#FFFFFF;--b-labio:inset 0 1px 0 rgb(255 255 255 / .4),inset 0 0 0 1px rgb(255 255 255 / .16);--b-contato:0 1px 2px rgb(6 30 46 / .3);
  --botao-sombra:0 1px 2px rgb(6 30 46 / .3);--botao-sombra-hover:0 10px 24px -12px rgb(6 30 46 / .6)}
.jc-botao--vidro::before{background:radial-gradient(closest-side circle at var(--gx,50%) var(--gy,50%),rgb(255 255 255 / .45),rgb(255 255 255 / 0)) no-repeat;background-size:240% 240%;background-position:var(--gx,50%) var(--gy,50%)}
/* pintura: estados normal, hover, pressionado. O ::before (glass.css) acende do ponto do toque; aqui o material acende por dentro */
.jc-botao:not(.jc-botao--vidro):not(:disabled,[aria-disabled="true"]){background:var(--botao-fundo);color:var(--botao-tinta);box-shadow:var(--botao-sombra)}
.jc-botao:not(.jc-botao--vidro) .jc-botao__seta{background:var(--botao-disco);color:var(--botao-disco-tinta);box-shadow:none}
.jc-botao:not(.jc-botao--vidro) .jc-botao__seta .jc-icone{--icone:var(--botao-disco-tinta)}
@media (hover:hover) and (pointer:fine){
  .jc-botao:not(.jc-botao--vidro):not(:disabled,[aria-disabled="true"]):hover{box-shadow:var(--botao-sombra-hover);filter:none}
}
.jc-botao:not(.jc-botao--vidro):not(:disabled,[aria-disabled="true"]):is(:active,[data-aceso]){transform:scale(.96);box-shadow:var(--botao-sombra-toque)}
/* foco: anel teal vivo no claro; amarelo no escuro (o teal sobre noite fica abaixo de 3:1) */
.jc-botao:focus-visible{outline:2px solid #1C6794;outline-offset:3px}
:is(.topo__acao,#proximo-passo,.chat__painel,.rodape,.jc-nav[data-modo="escuro"]) .jc-botao:focus-visible{outline-color:#FFE556}
/* CTA fixo do celular: o mesmo CTA, pintado (alfa ≥ .92: o blur não apareceria), com sombra de flutuação.
   Flutua sobre claro, mesh e noite: anel duplo no foco (noite colado, branco por fora). */
.jc-botao.botao-fixo:not(:disabled,[aria-disabled="true"]){box-shadow:var(--botao-sombra),0 16px 36px -14px rgb(6 30 46 / .55)}
.jc-botao.botao-fixo:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px;box-shadow:var(--botao-sombra),0 0 0 3px #0D2533}

/* ══ ponto de decisão: teal + amarelo JUNTOS (selo do 12x, garantia, crédito). Máx. 2 áreas quentes por tela com o CTA ═══ */
.lg-decisao{display:inline-flex;align-items:stretch;border-radius:999px;overflow:hidden;color:#FFFFFF;font:800 15px/1.1 var(--f-texto,sans-serif);
  background:linear-gradient(180deg,rgb(62 155 211 / .35),rgb(62 155 211 / 0) 55%),linear-gradient(rgb(18 72 104 / .98),rgb(18 72 104 / .98));
  box-shadow:inset 0 1px 0 rgb(62 155 211 / .8),inset 0 0 0 1px rgb(62 155 211 / .35),0 1px 2px rgb(6 30 46 / .25),0 10px 24px -14px rgb(28 103 148 / .7)}
.lg-decisao>*{display:inline-flex;align-items:center;gap:6px;padding:10px 16px}
.lg-decisao__quente{color:#0D2533;background:linear-gradient(180deg,rgb(255 248 200 / .8),rgb(255 248 200 / 0) 60%),linear-gradient(rgb(255 229 86 / .96),rgb(255 229 86 / .96));
  box-shadow:inset 0 -1.5px 0 rgb(217 174 76 / .95),inset 1px 0 0 rgb(255 255 255 / .6)}
.lg-decisao--grande{font-size:clamp(20px,2.4vw,28px)}
.lg-decisao--grande>*{padding:12px 20px}

/* luz ambiente da marca atrás do vidro: teal vivo com um toque de amarelo. Estática (nada ligado à rolagem). */
.lg-luz{position:relative;isolation:isolate}
.lg-luz::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(30% 45% at 22% 38%,rgb(28 103 148 / .7),rgb(28 103 148 / 0) 70%),radial-gradient(24% 34% at 70% 62%,rgb(62 155 211 / .5),rgb(62 155 211 / 0) 70%),
    radial-gradient(16% 24% at 84% 26%,rgb(255 229 86 / .4),rgb(255 229 86 / 0) 70%)}
.lg-luz.lg-claro::before{background:radial-gradient(30% 45% at 22% 38%,rgb(28 103 148 / .28),rgb(28 103 148 / 0) 70%),radial-gradient(16% 24% at 84% 26%,rgb(255 229 86 / .3),rgb(255 229 86 / 0) 70%)}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   APLICAÇÃO NO SITE (barra, #topo, #como-trabalham, #profissao, botões, chat, CTA fixo)
   Seletores com id onde a regra antiga tem mais especificidade que a classe do sistema.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── barra: item ativo em teal (glass.js marca aria-current na seção visível) ── */
.jc-nav[data-modo="claro"] .jc-nav__links a[aria-current]:not(.jc-botao){background:rgb(28 103 148 / .12);box-shadow:inset 0 0 0 1.5px rgb(28 103 148 / .5);color:var(--nav-link)}
.jc-nav[data-modo="escuro"] .jc-nav__links a[aria-current]:not(.jc-botao){background:rgb(255 255 255 / .08);box-shadow:inset 0 0 0 1.5px rgb(62 155 211 / .85);color:var(--nav-link)}
.jc-nav[data-modo="claro"] .jc-nav__links a:not(.jc-botao):focus-visible,.jc-nav[data-modo="claro"] .jc-nav__menu:focus-visible,.jc-nav[data-modo="claro"] .jc-nav__marca:focus-visible{outline:2px solid #1C6794;outline-offset:3px;box-shadow:none}
.jc-nav[data-modo="escuro"] .jc-nav__links a:not(.jc-botao):focus-visible,.jc-nav[data-modo="escuro"] .jc-nav__menu:focus-visible,.jc-nav[data-modo="escuro"] .jc-nav__marca:focus-visible{outline:2px solid #FFE556;outline-offset:3px;box-shadow:none}

/* ── #topo: o card da ação é G2 escuro (class="topo__acao lg-2 lg-escuro"). Todo texto branco; link com fio teal claro ── */
.topo__acao.lg-2 :is(.jc-lead,.topo__prova,.topo__apoio,.topo__apoio p){color:#FFFFFF}
.topo__acao.lg-2 .jc-link-seta{color:#FFFFFF;text-decoration:underline;text-decoration-color:#3E9BD3;text-decoration-thickness:2px;text-underline-offset:4px}
.topo__acao.lg-2 .jc-link-seta:focus-visible{outline:2px solid #FFE556;outline-offset:3px}
.topo__acao.lg-2 .topo__apoio{border-top-color:rgb(207 227 234 / .2)}

/* ── #como-trabalham: a moldura do bento é G3 moldura escuro (pintada, sem filtro) ── */
#como-trabalham .q-palco.fu-palco.lg-3{background:var(--lg-veu);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 var(--lg-aro-cima),inset 0 -1px 0 var(--lg-aro-baixo),inset 0 0 0 1px var(--lg-borda),var(--lg-sombra)}
#como-trabalham .q-palco.fu-palco.lg-3::after{content:none}
/* fios e pulsos em teal claro (fundo escuro) com pulso amarelo; anéis do hub em teal */
#como-trabalham .fu-hub__fios path{stroke:var(--lg-fio-escuro);stroke-opacity:.6;stroke-width:1.2;stroke-linecap:round}   /* um traço só, dos dois lados (João 07/11) */
#como-trabalham .fu-hub__pulso{background:var(--lg-pulso);box-shadow:var(--lg-pulso-brilho)}
#como-trabalham .fu-hub__anel--1{box-shadow:inset 0 0 0 1px rgb(62 155 211 / .5)}
#como-trabalham .fu-hub__anel--2{box-shadow:inset 0 0 0 1px rgb(62 155 211 / .26)}
#como-trabalham .fu-mem__fios path{stroke:rgb(62 155 211 / .55)}
/* discos do hub (G4 escuro): a luz interna, que era ouro, vem em teal claro */
#como-trabalham .fu-no{box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 0 0 1px rgb(255 255 255 / .14),
    inset var(--fu-luz) 0 12px -8px rgb(62 155 211 / .4),0 0 0 4px var(--fu-s1),0 6px 12px -4px rgb(6 30 46 / .55)}
@media (hover:hover) and (pointer:fine){
  #como-trabalham .fu-no:hover{box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 0 0 1px rgb(62 155 211 / .5),
    inset var(--fu-luz) 0 14px -6px rgb(62 155 211 / .55),0 0 0 4px var(--fu-s1),0 0 18px 0 rgb(62 155 211 / .28),0 6px 12px -4px rgb(6 30 46 / .55)}
}
#como-trabalham .fu-no--pendente{box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 0 0 1px rgb(207 227 234 / .4),0 0 0 4px var(--fu-s1),0 6px 12px -4px rgb(6 30 46 / .55)}
/* selo "exemplo" (G4 escuro neutro) */
#como-trabalham .fu-ex{background:linear-gradient(180deg,rgb(255 255 255 / .10),rgb(255 255 255 / 0) 60%),rgb(24 32 38 / .78);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .4),inset 0 0 0 1px rgb(255 255 255 / .14)}
/* filtro selecionado = chip ativo em teal (G4 escuro .lg-ativo); texto branco */
#como-trabalham .fu-filtro[aria-pressed="true"]{background:linear-gradient(rgb(28 103 148 / .34),rgb(28 103 148 / .34)),rgb(24 32 38 / .78);color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 0 0 1.5px rgb(62 155 211 / .9)}
#como-trabalham .fu-filtro[aria-pressed="true"] span{color:#FFFFFF}

/* ── #profissao ── */
/* manchete do FDE (≥ 1100 px, onde ela fica sobre a cena) = G2 escuro. Abaixo disso é texto direto no palco, sem vidro. */
@media (min-width:1100px){
  .fde .fde__cab{--lg-filtro:blur(9px) saturate(200%) brightness(.36);
    background:radial-gradient(48% 70px at calc(50% + var(--lg-px,0%)) -10px,rgb(255 255 255 / .24),rgb(255 255 255 / 0) 72%),
      linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / 0) 40px),linear-gradient(160deg,rgb(14 61 89 / .60),rgb(14 61 89 / .68));
    -webkit-backdrop-filter:blur(9px) saturate(200%) brightness(.36);backdrop-filter:blur(9px) saturate(200%) brightness(.36);
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),inset 0 -1px 0 rgb(240 208 122 / .4),inset 0 0 0 1px rgb(255 255 255 / .1),
      inset 0 28px 44px -30px rgb(255 255 255 / .26),inset 0 -20px 40px -30px rgb(28 103 148 / .35),0 2px 6px rgb(6 30 46 / .3),0 30px 70px -34px rgb(6 30 46 / .6)}
  @media (hover:hover) and (pointer:fine){.fde .fde__cab:hover{box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1px 0 rgb(255 229 86 / .7),inset 0 0 0 1px rgb(255 229 86 / .32),
      inset 0 28px 44px -30px rgb(255 255 255 / .36),inset 0 -20px 40px -30px rgb(28 103 148 / .45),0 2px 6px rgb(6 30 46 / .3),0 30px 70px -34px rgb(6 30 46 / .6)}}
}
/* linha de luz do quebra-cabeça: teal claro nas emendas; a aura da peça segue amarela (o toque de amarelo) */
#profissao .fde-costura{stroke:var(--lg-fio-escuro)}
#profissao .fde-lacuna{stroke:var(--lg-fio-escuro)}
/* 3 verbos: eram 3 backdrop-filter (fora do orçamento). Viram G3 escuro PINTADO, com o mesmo desenho aprovado em 07/11.
   Desvio do mapa §6 (G3 claro): o card escuro sobre a luz teal é a peça aprovada; contraste medido no VIDRO-GLOBAL.md. */
#profissao .faz li{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:radial-gradient(48% 50px at 30% -14px,rgb(255 255 255 / .12),rgb(255 255 255 / 0) 72%),
    linear-gradient(180deg,rgb(255 255 255 / .06),rgb(255 255 255 / 0) 40px),
    radial-gradient(70% 60% at 100% 100%,rgb(28 103 148 / .22),rgb(28 103 148 / 0) 70%),
    linear-gradient(160deg,rgb(14 61 89 / .92),rgb(14 61 89 / .94)),linear-gradient(rgb(6 30 46 / .3),rgb(6 30 46 / .3));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),inset 0 -1px 0 rgb(240 208 122 / .45),inset 0 0 0 1px rgb(255 255 255 / .1),
    inset 0 22px 34px -26px rgb(255 255 255 / .18),0 2px 6px rgb(6 30 46 / .3),0 24px 60px -24px rgb(6 30 46 / .6)}
/* a linha que desce da peça e corre sobre os cards: o trilho é teal vivo (sobre o papel); a gota que desce é o pulso amarelo */
#profissao .faz{--luz:var(--lg-fio)}
#profissao .faz::before{background:var(--lg-pulso);box-shadow:var(--lg-pulso-brilho)}
#profissao .faz::after{box-shadow:0 0 8px rgb(28 103 148 / .55)}
/* card aceso: fio de cima teal claro com um brilho amarelo por dentro */
#profissao .faz li::before{box-shadow:inset 0 2px 0 var(--lg-fio-escuro),inset 0 0 0 1px rgb(62 155 211 / .45),inset 0 30px 40px -34px rgb(255 229 86 / .22)}

/* ── chat: janela aberta = G2 folha escuro (backdrop só enquanto aberta; ≤ 600 px vira opaca) ── */
.chat__painel{background:radial-gradient(70% 40% at 100% 0%,rgb(62 155 211 / .16),rgb(62 155 211 / 0) 70%),
    linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / 0) 40px),linear-gradient(160deg,rgb(14 61 89 / .78),rgb(13 37 51 / .88));
  -webkit-backdrop-filter:blur(9px) saturate(200%) brightness(.36);backdrop-filter:blur(9px) saturate(200%) brightness(.36);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),inset 0 -1px 0 rgb(240 208 122 / .4),inset 0 0 0 1px rgb(255 255 255 / .10),
    inset 0 28px 44px -30px rgb(255 255 255 / .2),0 2px 6px rgb(6 30 46 / .3),0 40px 90px -30px rgb(6 30 46 / .8)}
@media (max-width:600px){.chat__painel{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgb(255 255 255 / .06),rgb(255 255 255 / 0) 40px),#0D2533}}
/* peças do chat: G4 escuro neutro; selecionado em teal; enviar = ação principal (amarelo) */
.chat__opcao,.chat__fechar{background:linear-gradient(180deg,rgb(255 255 255 / .10),rgb(255 255 255 / 0) 60%),rgb(24 32 38 / .6);color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .4),inset 0 0 0 1px rgb(255 255 255 / .16)}
@media (hover:hover) and (pointer:fine){.chat__opcao:hover:not(:disabled),.chat__fechar:hover{background:linear-gradient(180deg,rgb(255 255 255 / .16),rgb(255 255 255 / 0) 60%),rgb(24 32 38 / .6)}}
.chat__opcao[aria-pressed="true"]{background:linear-gradient(rgb(28 103 148 / .4),rgb(28 103 148 / .4)),rgb(24 32 38 / .6);color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 0 0 1.5px rgb(62 155 211 / .9)}
.chat__linha,.chat__outro{background:linear-gradient(180deg,rgb(255 255 255 / .08),rgb(255 255 255 / .04));box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),inset 0 0 0 1px rgb(255 255 255 / .22)}
.chat__linha:focus-within{box-shadow:inset 0 0 0 2px #FFE556,0 0 0 4px rgb(255 229 86 / .18)}
.chat__enviar{background:radial-gradient(120% 90% at 50% -20%,rgb(255 248 200 / .7),rgb(255 248 200 / 0) 60%),linear-gradient(180deg,rgb(255 236 120 / .92),rgb(255 229 86 / .94) 50%,rgb(255 222 70 / .97));
  color:#0D2533;box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1.5px 0 rgb(217 174 76 / .95),inset 0 0 0 1px rgb(217 174 76 / .5)}
/* progresso: trilho teal claro com a ponta amarela */
.chat__progresso i{background:linear-gradient(90deg,#1C6794,#3E9BD3 80%,#FFE556)}
/* links no vidro escuro: texto branco, sublinhado teal claro (o teal como letra cai abaixo de 7:1 no escuro) */
.chat__privacidade a,.chat__link,.chat__mudar,.chat__previa summary{color:#FFFFFF;text-decoration:underline;text-decoration-color:#3E9BD3;text-decoration-thickness:2px;text-underline-offset:3px}

/* ══ largura e toque: G2 com blur menor (custo no celular) ═══════════════════════════════════════ */
@media (max-width:760px),(pointer:coarse){
  .lg-2.lg-escuro{-webkit-backdrop-filter:blur(8px) saturate(170%) brightness(.36);backdrop-filter:blur(8px) saturate(170%) brightness(.36)}
  .lg-2.lg-claro{-webkit-backdrop-filter:blur(14px) saturate(120%) brightness(1.08);backdrop-filter:blur(14px) saturate(120%) brightness(1.08)}
}
@media (max-width:600px){
  .lg-2.lg-folha{-webkit-backdrop-filter:none;backdrop-filter:none}
  .lg-2.lg-folha.lg-escuro{--lg-veu:#0D2533}
  .lg-2.lg-folha.lg-claro{--lg-veu:#F6F3EE}
}

/* ══ fallbacks ════════════════════════════════════════════════════════════════════════════════════ */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .lg-1.lg-claro,.lg-2.lg-claro{--lg-veu:rgb(246 243 238 / .96)}
  .lg-1.lg-escuro,.lg-2.lg-escuro{--lg-veu:rgb(18 72 104 / .95)}
}
/* WebKit que calcula o filtro sem pintar (o do Playwright no Windows; glass.css l.203): leitura não depende do blur */
@supports not (backdrop-filter:blur(1px)){
  .lg-1.lg-claro{--lg-veu:rgb(246 243 238 / .92)}
  .lg-1.lg-escuro{--lg-veu:rgb(18 72 104 / .92)}
  .lg-2.lg-escuro{--lg-veu:linear-gradient(160deg,rgb(14 61 89 / .88),rgb(14 61 89 / .92))}
  .lg-2.lg-claro{--lg-veu:rgb(242 245 247 / .94)}
  .fde .fde__cab{background:linear-gradient(160deg,rgb(14 61 89 / .88),rgb(14 61 89 / .92))}
  .chat__painel{background:rgb(14 51 74 / .97)}
}
/* reduzir transparência: sólido, sem filtro, sem reflexo */
@media (prefers-reduced-transparency:reduce){
  .lg-1,.lg-2,.fde .fde__cab,.chat__painel{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .lg-claro:is(.lg-1,.lg-2,.lg-3,.lg-4){--lg-veu:#F6F3EE!important}
  .lg-escuro:is(.lg-1,.lg-2,.lg-3,.lg-4){--lg-veu:#0E3D59!important}
  #como-trabalham .q-palco.fu-palco.lg-3,.fde .fde__cab,#profissao .faz li,.chat__painel{background:#0E3D59}
  .lg-1::before,.lg-2::before,.lg-3::before,.lg-4::before,.lg-luz::before{display:none}
  .jc-botao:not(.jc-botao--vidro){--botao-fundo:#FFE556}
  .jc-botao--vidro{--botao-fundo:#FFFFFF}
  :is([data-modo="escuro"],.chat__painel) .jc-botao--vidro{--botao-fundo:#0E3D59}
  .lg-decisao{background:#124868}.lg-decisao__quente{background:#FFE556}
  .chat__opcao,.chat__fechar,.chat__linha,.chat__outro,#como-trabalham .fu-ex{background:#0E3D59}
}
/* aumentar contraste: preto ou branco com contorno */
@media (prefers-contrast:more){
  .lg-1,.lg-2,.fde .fde__cab,html.lg-lente .lg-2[data-lg-lente]{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .lg-claro:is(.lg-1,.lg-2,.lg-3,.lg-4){--lg-veu:#FFFFFF!important;--lg-tinta-2:#0D2533!important}
  .lg-escuro:is(.lg-1,.lg-2,.lg-3,.lg-4){--lg-veu:#0D2533!important;--lg-tinta-2:#FFFFFF!important}
  :is(.lg-1,.lg-2,.lg-3,.lg-4){box-shadow:inset 0 0 0 1.5px currentColor!important}
  .lg-1::before,.lg-2::before,.lg-3::before,.lg-4::before{display:none}
  .fde .fde__cab,#profissao .faz li{background:#0D2533}
  .jc-botao:not(.jc-botao--vidro){--botao-fundo:#FFE556}
}
/* menu do celular = G1: mesma receita da barra (16 px · 170 % · brilho por modo); o painel ainda vinha do site.css com 20 px · 150 % */
@media (max-width:960px) and (not (prefers-reduced-transparency:reduce)) and (not (prefers-contrast:more)){
  .js .jc-nav[data-modo="claro"] .jc-nav__links{-webkit-backdrop-filter:blur(16px) saturate(170%) brightness(1.06);backdrop-filter:blur(16px) saturate(170%) brightness(1.06)}
  .js .jc-nav[data-modo="escuro"] .jc-nav__links{-webkit-backdrop-filter:blur(16px) saturate(170%) brightness(.4);backdrop-filter:blur(16px) saturate(170%) brightness(.4)}
}
/* reduzir movimento: sem escala nem mola; o acender vira só um cross-fade curto */
@media (prefers-reduced-motion:reduce){
  .lg-toque,.lg-toque:active,.lg-toque[data-aceso],
  .jc-botao:not(.jc-botao--vidro):not(:disabled,[aria-disabled="true"]):is(:active,[data-aceso]){transform:none;transition:box-shadow 120ms linear}
  .lg-toque::after{transition:opacity 120ms linear}
  .lg-2{transition:none}
}
@media (forced-colors:active){
  .lg-1::before,.lg-2::before,.lg-3::before,.lg-4::before,.lg-toque::after{display:none}
  :is(.lg-1,.lg-2,.lg-3,.lg-4){border:1px solid CanvasText;background:Canvas!important;color:CanvasText;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}