/* John's Company · liquid glass da barra e dos botões (06/11/2026, não publicada).
   Aproximação web do vidro "regular" da Apple (expo-glass-effect / UIGlassEffect): não é o material oficial, que só existe no iOS 26+.
   Fontes: revisao-0611/LIQUID-GLASS-WEB.md; apple-design/APLICACAO-JOHNS.md §1–2 (vidro só na camada de controle, sem vidro sobre vidro,
   tint só no CTA, cápsula concêntrica, mola sem overshoot, fosco com reduzir transparência).
   Adaptação: js/glass.js troca o data-modo da <header class="jc-nav"> conforme o que passa por baixo (claro ou escuro).
   Isso reaproveita os tokens de modo (link, logo, foco). Muda a regra v6.1 (pílula sempre escura): barra monocromática que
   escurece sobre o claro e clareia sobre o escuro (WWDC25 219 @15:16). Para voltar à v6.1, apague o bloco "modo" do glass.js.
   Contraste medido (relatório FDE-GLASS-RELATORIO.md): link ≥ 7:1 e texto do CTA ≥ 7:1 no pior fundo. */

@property --lg-tint{syntax:'<color>';inherits:true;initial-value:rgb(13 37 51 / .62)}
@property --lg-aro-baixo{syntax:'<color>';inherits:true;initial-value:rgb(255 255 255 / .16)}
@property --lg-x{syntax:'<percentage>';inherits:true;initial-value:30%}

.jc-nav{
  /* mola criticamente amortecida (sem overshoot), amostrada de 1-(1+ωt)e^-ωt; interrompível porque é transição CSS */
  --mola:linear(0,.09,.264,.442,.594,.713,.801,.864,.908,.939,.96,.973,.983,.989,.993,.995,1);
  --lg-blur:16px;--lg-sat:170%;
  transition:--lg-tint 320ms var(--m-entra),--lg-aro-baixo 320ms var(--m-entra)}
/* G1 do sistema (glass-sistema.css, rota híbrida): no escuro a barra é vidro TEAL. Corpo no tom escuro do teal vivo #124868 .70
   (branco sobre #1C6794 puro dá só 6,15), aro e lábio em teal claro #3E9BD3, brightness .4: branco ≥ 7,21 no pior fundo (GLASS-SISTEMA §5) */
.jc-nav[data-modo="escuro"]{--nav-link:#FFFFFF;--lg-tint:rgb(18 72 104 / .7);--lg-brilho:.4;--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-sombra:0 1px 2px rgb(6 30 46 / .3),0 14px 34px -14px rgb(6 30 46 / .55)}
/* modo claro: off-white .76 + brightness 1.06, link noite #0D2533 (varredura da página inteira: com .72 e #0E3D59 caía a 5,5 sobre fotos escuras); sombra mais fraca sobre fundo claro (adaptação da Apple) */
.jc-nav[data-modo="claro"]{--nav-link:#0D2533;--nav-link-ativo:#0D2533;--lg-tint:rgb(246 243 238 / .76);--lg-brilho:1.06;--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:.55;--lg-sombra:0 1px 2px rgb(14 61 89 / .08),0 10px 28px -14px rgb(14 61 89 / .24);}

/* ── a cápsula: tint + reflexo que segue o ponteiro + lábio especular em cima + sombra adaptativa ── */
.jc-nav .jc-nav__pilula,.jc-nav[data-modo] .jc-nav__pilula{
  background:radial-gradient(60% 160% at var(--lg-x) -60%,rgb(255 255 255 / var(--lg-spec)),rgb(255 255 255 / 0) 70%),linear-gradient(var(--lg-tint),var(--lg-tint));
  -webkit-backdrop-filter:blur(16px) saturate(170%) brightness(1.06);backdrop-filter:blur(16px) saturate(170%) brightness(1.06);
  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);
  transition:width var(--m-medio) var(--m-entra),box-shadow 320ms var(--m-entra)}
.jc-nav[data-modo="claro"] .jc-logo{--logo:url('../assets/logo/letreiro-noite.svg')}
.jc-nav .jc-logo{transition:background-image 320ms var(--m-entra)}
/* WebKit: var() dentro de -webkit-backdrop-filter computa "none" (medido no WebKit 18 do Playwright: blur(var(--b)) e var(--f)
   dão none; o literal funciona). Por isso todo backdrop-filter deste arquivo é literal, por modo e por painel. */
.jc-nav[data-modo="escuro"] .jc-nav__pilula{-webkit-backdrop-filter:blur(16px) saturate(170%) brightness(.4);backdrop-filter:blur(16px) saturate(170%) brightness(.4)}
/* borda: o ::before (antes, o fio de ouro decorativo) vira o aro especular — forte em cima, some nos lados, volta fraco embaixo */
.jc-nav .jc-nav__pilula::before{padding:1px;
  background:radial-gradient(40% 120% at var(--lg-x) 0%,rgb(255 255 255 / .9),rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg,var(--lg-aro-cima),rgb(255 255 255 / 0) 42%,rgb(255 255 255 / 0) 62%,var(--lg-aro-baixo))}
.jc-nav__links a{transition:color 320ms var(--m-entra),background-color var(--m-curto) ease}

/* lente (refração nas bordas): só Chromium aplica SVG em backdrop-filter; o glass.js liga a classe .lg-lente só lá e só acima
   de 960 px. A lente vai só no backdrop-filter sem prefixo e só sob .lg-lente; o -webkit-backdrop-filter de todo vidro é blur
   puro, porque no WebKit um url() derruba a declaração inteira. Nos painéis, a regra da lente é inserida pelo glass.js.
   perf (06/11): a barra saiu da lente e ficou em blur puro. A barra fixa refiltra o fundo a cada quadro de rolagem e o
   url() pesava na GPU (A/B a 1440 rolando o bento: 25% → 18% e 9% → 5% de quadros > 20 ms). A lente fica no card do topo. */
.jc-nav__defs{position:absolute;width:0;height:0;overflow:hidden}

/* efeito de borda de rolagem: desfoque curto sob a barra, só no topo, sem escurecer */
.jc-nav__borda{position:fixed;inset:0 0 auto;z-index:-2;height:calc(96px + env(safe-area-inset-top,0px));pointer-events:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask:linear-gradient(#000 35%,transparent);mask:linear-gradient(#000 35%,transparent)}

/* celular: o desfoque fica no ::after (o painel do menu tem o próprio vidro; dois backdrop-filter aninhados quebram) */
@media (max-width:960px){
  .jc-nav .jc-nav__pilula,.jc-nav[data-modo] .jc-nav__pilula{-webkit-backdrop-filter:none;backdrop-filter:none}
  .jc-nav .jc-nav__pilula::after{-webkit-backdrop-filter:blur(16px) saturate(170%) brightness(1.06);backdrop-filter:blur(16px) saturate(170%) brightness(1.06)}
  .jc-nav[data-modo="escuro"] .jc-nav__pilula::after{-webkit-backdrop-filter:blur(16px) saturate(170%) brightness(.4);backdrop-filter:blur(16px) saturate(170%) brightness(.4)}
  /* painel do menu no modo claro: vidro claro, texto noite (o painel escuro do site.css fica no modo escuro) */
  .js .jc-nav[data-modo="claro"] .jc-nav__links{background:linear-gradient(180deg,rgb(255 255 255 / .5),rgb(255 255 255 / 0) 30%),linear-gradient(rgb(246 243 238 / .84),rgb(246 243 238 / .84));
    -webkit-backdrop-filter:blur(20px) saturate(150%) brightness(1.06);backdrop-filter:blur(20px) saturate(150%) brightness(1.06);
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .95),inset 0 -1px 0 rgb(14 61 89 / .14),inset 0 0 0 1px rgb(14 61 89 / .08),0 24px 50px -24px rgb(14 61 89 / .4)}
  /* WebKit: o painel do menu não desfoca (a pílula é contexto de empilhamento e vira a raiz do fundo). A leitura não pode
     depender do blur: véu quase opaco nos dois modos; o blur fica como acabamento onde existir. */
  .js .jc-nav[data-modo="claro"] .jc-nav__links{background-color:rgb(246 243 238 / .94)}
  /* escuro: o menu é o mesmo G1 teal da barra (rota híbrida) */
  .js .jc-nav[data-modo="escuro"] .jc-nav__links{background:linear-gradient(180deg,rgb(62 155 211 / .18),rgb(62 155 211 / 0) 40%),linear-gradient(rgb(18 72 104 / .94),rgb(18 72 104 / .94));
    box-shadow:inset 0 1px 0 rgb(62 155 211 / .8),inset 0 -1px 0 rgb(62 155 211 / .3),inset 0 0 0 1px rgb(62 155 211 / .28),0 24px 50px -24px rgb(6 30 46 / .7)}
  .jc-nav[data-modo="claro"] .jc-nav__menu:focus-visible,.jc-nav[data-modo="claro"] .jc-nav__links a:focus-visible{outline-color:var(--foco)}
}
/* morph: o painel nasce do botão Menu (canto de cima à direita) e volta para ele, com a mola */
@media (max-width:960px) and (prefers-reduced-motion:no-preference){
  .js .jc-nav__links{transform-origin:calc(100% - 52px) -28px;transform:scale(.86) translateY(-8px);
    transition:opacity 160ms ease-out,transform 260ms var(--m-entra),visibility 0s linear 260ms}
  .js .jc-nav[data-aberto] .jc-nav__links{transform:none;transition:opacity 180ms ease-out,transform 460ms var(--mola),visibility 0s}
}

/* ── botões: a pintura (vidro amarelo, estados) saiu daqui e está em glass-sistema.css (.jc-botao = CTA do sistema).
   Aqui fica só o brilho que nasce do toque. */
/* brilho interativo: nasce sob o ponteiro (--gx/--gy do glass.js) e espalha; acende no pointer-down */
.jc-botao::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(closest-side circle at var(--gx,50%) var(--gy,50%),rgb(255 252 230 / .85),rgb(255 248 205 / .25) 55%,rgb(255 248 205 / 0)) no-repeat;
  background-size:240% 240%;background-position:var(--gx,50%) var(--gy,50%);opacity:0;transition:opacity 280ms ease-out}
.jc-botao[data-aceso]::before{opacity:1;transition-duration:80ms}
.jc-botao[data-aceso],.jc-botao:active{transform:scale(.96);transition:transform 120ms var(--m-entra),box-shadow var(--m-curto) var(--m-entra)}
.jc-botao{transition:transform 420ms var(--mola,var(--m-entra)),box-shadow var(--m-curto) var(--m-entra),filter var(--m-curto) ease}
.jc-botao:disabled::before,.jc-botao[aria-disabled="true"]::before{display:none}
/* link da barra: o vidro também acende sob o dedo (sem cor; barra monocromática) */
.jc-nav__links a:not(.jc-botao)[data-aceso]{background:var(--nav-hover);transform:scale(.96)}
.jc-nav__links a:not(.jc-botao){transition:color 320ms var(--m-entra),background-color var(--m-curto) ease,transform 420ms var(--mola)}

/* ── fallbacks ── */
@media (prefers-reduced-transparency:reduce){
  .jc-nav[data-modo="escuro"] .jc-nav__pilula{background:#0E3D59}
  .jc-nav[data-modo="claro"] .jc-nav__pilula{background:var(--off-white-placa)}
  .jc-nav .jc-nav__pilula,.lg-lente .jc-nav .jc-nav__pilula,.jc-nav .jc-nav__pilula::after,.jc-nav__borda{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .jc-nav__borda{display:none}
  .js .jc-nav[data-modo="claro"] .jc-nav__links{background:var(--off-white-placa)}
  .js .jc-nav[data-modo="escuro"] .jc-nav__links{background:#0E3D59}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .jc-nav[data-modo="escuro"] .jc-nav__pilula{background:rgb(18 72 104 / .96)}
  .jc-nav[data-modo="claro"] .jc-nav__pilula{background:rgb(246 243 238 / .97)}
}
/* reduzir movimento: só cross-fade; sem escala, sem mola, sem reflexo andando */
@media (prefers-reduced-motion:reduce){
  .jc-nav,.jc-nav .jc-nav__pilula,.jc-nav__links a{transition:none}
  .jc-botao,.jc-botao[data-aceso],.jc-botao:active,.jc-nav__links a:not(.jc-botao)[data-aceso]{transform:none;transition:opacity 120ms linear}
}
@media (forced-colors:active){.jc-botao::before,.jc-nav__borda{display:none}}

/* ══ v2 (06/11, pedido do João: "até agora não vi o liquid glass") ═════════════════════════════════════════════
   Decisão do João (prevalece sobre o "vidro só em controle" da Apple): o card do topo, a moldura do bento, o organograma e o
   painel da manchete do FDE são liquid glass, como o raio-X do Apolo (DS v5 receita B). Sem vidro sobre vidro: o que está
   dentro deles continua opaco. Para o vidro aparecer, ele precisa de algo atrás: luz ambiente da marca (.fu::after),
   as mãos do topo e a imagem do FDE. A lente (glass.js §5) curva o que está atrás só na faixa da borda. */
@property --lg-sx{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --lg-px{syntax:'<percentage>';inherits:true;initial-value:0%}

/* 06/11 (vidro global): o card do topo virou G2 (.lg-2.lg-escuro) e a moldura do bento virou G3 moldura, ambos em
   glass-sistema.css; a manchete do FDE também foi para lá. Aqui fica só o organograma (#quem-sao), que é G2 escuro. */
#quem-sao .q-palco.fu-org{
  /* vidro fumê: brightness .36 + véu .44→.6 segura o texto claro ≥ 7:1 no pior ponto (medido; com .5 caía a 5,2 sobre o
     off-white) e saturate 200 % mantém a cor do que está atrás */
  --lg-filtro:blur(9px) saturate(200%) brightness(.36);
  --lg-veu1:.44;--lg-veu2:.6;
  --lg-aro:rgb(255 255 255 / .55);
  background:
    /* reflexo especular: faixa curta em px, no lábio de cima, acima do texto (em % ele descia sobre a 1ª linha e baixava o contraste) */
    radial-gradient(48% 70px at calc(var(--lg-sx) + var(--lg-px)) -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),
    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 / var(--lg-veu1)),rgb(13 37 51 / var(--lg-veu2)));
  -webkit-backdrop-filter:blur(9px) saturate(200%) brightness(.36);backdrop-filter:blur(9px) saturate(200%) brightness(.36);
  box-shadow:inset 0 1px 0 var(--lg-aro),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 / .28),inset 0 -20px 40px -30px rgb(28 103 148 / .35),0 30px 70px -34px rgb(6 30 46 / .6);
  transition:box-shadow 360ms var(--m-entra)}
/* card do topo: a 1ª linha do texto fica sob o reflexo de cima e sobre o braço de mármore (medido 6,3:1 com .44); véu .6 + reflexo em px → ≥ 7:1 */
/* moldura do bento: não tem texto sobre o vidro (o texto está nas peças opacas), então ela é vidro claro: sem escurecer,
   véu fino. A luz ambiente aparece desfocada nas calhas de 16 px entre as peças (antes lia como um aro escuro).
   O organograma fica fumê e a luz atrás dele é só teal (ouro sob brightness .36 virava oliva). */
/* sem backdrop-filter: atrás da moldura só há a luz ambiente, que já é um degradê macio (o blur dela é igual a ela mesma), e as
   animações do miolo faziam o filtro ser refeito a cada quadro (REVISAO-OMNI §3; A/B: parado sobre o bento caiu para ~2 %). */
/* a borda acende sob o mouse */
@media (hover:hover) and (pointer:fine){
  #quem-sao .q-palco.fu-org:hover,.fde__cab:hover{--lg-aro:rgb(255 255 255 / .9);
    box-shadow:inset 0 1px 0 var(--lg-aro),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 30px 70px -34px rgb(6 30 46 / .6)}
}

/* luz ambiente atrás do bento e do organograma: manchas de teal vivo e ouro SÓ atrás dos dois painéis (o glass.js mede onde eles
   estão e passa as posições em px), para não tingir o texto da seção. Parallax curto ao rolar. Sem JS: nada aparece. */
.fu::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(var(--b1r,0 0) at var(--b1,0 0),rgb(28 103 148 / .62),rgb(28 103 148 / 0) 70%),
    radial-gradient(var(--b2r,0 0) at var(--b2,0 0),rgb(62 155 211 / .55),rgb(62 155 211 / 0) 70%),
    radial-gradient(var(--b3r,0 0) at var(--b3,0 0),rgb(255 229 86 / .5),rgb(255 229 86 / 0) 70%),
    radial-gradient(var(--b4r,0 0) at var(--b4,0 0),rgb(28 103 148 / .6),rgb(28 103 148 / 0) 70%),
    radial-gradient(var(--o1r,0 0) at var(--o1,0 0),rgb(62 155 211 / .6),rgb(62 155 211 / 0) 70%),
    radial-gradient(var(--o2r,0 0) at var(--o2,0 0),rgb(28 103 148 / .62),rgb(28 103 148 / 0) 70%)}

/* FDE: a manchete vira um painel de vidro sobre a cena (só onde ela fica sobreposta, 1100+). O painel termina no fim do
   texto, acima da fileira de peças (decisão registrada no fde.css).
   Cantos concêntricos: palco 40 px, painel a 20 px da borda → raio 20 px. */
@media (min-width:1100px){
  .fde__palco::after{display:none}
  /* o painel ficava sobre azul-noite liso: a luz ambiente (teal vivo e teal claro; ouro sob o vidro fumê vira oliva) vive no fundo do palco,
     atrás do painel, para o vidro ter o que desfocar */
  .fde .fde__palco{background:
    radial-gradient(24% 34% at 14% 28%,rgb(62 155 211 / .75),rgb(62 155 211 / 0) 70%),
    radial-gradient(22% 30% at 30% 46%,rgb(28 103 148 / .9),rgb(28 103 148 / 0) 70%),
    radial-gradient(70% 90% at 32% 30%,#0A1E2E,var(--fde-fundo))}
  .fde .fde__cab{--lg-filtro:blur(9px) saturate(200%) brightness(.36);--lg-aro:rgb(255 255 255 / .5);
    align-self:start;margin:20px 0 0 20px;width:calc(42% - 20px);box-sizing:border-box;
    padding:clamp(28px,3.4cqi,48px) clamp(24px,3cqi,44px) clamp(28px,3cqi,40px);border-radius:20px;
    background:radial-gradient(48% 70px at calc(var(--lg-sx) + var(--lg-px)) -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 40 60 / .4),rgb(6 16 25 / .56));
    -webkit-backdrop-filter:blur(9px) saturate(200%) brightness(.36);backdrop-filter:blur(9px) saturate(200%) brightness(.36);
    box-shadow:inset 0 1px 0 var(--lg-aro),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),0 24px 50px -24px rgb(0 0 0 / .5);transition:box-shadow 360ms var(--m-entra)}
  .fde .fde__h2{font-size:clamp(28px,3.05cqi,44px)}
}

/* sem animação ligada à rolagem (REVISAO-OMNI §3: somada ao backdrop-filter, levava o bento a 86 % de quadros ruins no celular).
   O reflexo só se move com o mouse (desktop). Celular e toque: blur menor nos painéis, sem lente (a lente é só ≥ 961 px). */
@media (max-width:760px),(pointer:coarse){
  #quem-sao .q-palco.fu-org{-webkit-backdrop-filter:blur(8px) saturate(170%) brightness(.36);backdrop-filter:blur(8px) saturate(170%) brightness(.36)}
}
@media (prefers-reduced-transparency:reduce){
  #quem-sao .q-palco.fu-org,.fde__cab{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgb(14 61 89 / .97)}
  .fu::after{display:none}
}

/* WebKit sem backdrop-filter sem prefixo (Safari < 18 e o WebKit do Playwright): os vidros de vidro.css e components.css usam
   var() no -webkit-backdrop-filter e não pintam. Mesmos valores, literais. O Chromium e o Safari 18 não entram aqui. */
@supports not (backdrop-filter:blur(1px)){
  .q-palco.cenas,.q-palco.comparar,.q-palco.dg,.q-palco.fecho,.cf-mesa,.valores,.dg .cartao{-webkit-backdrop-filter:blur(28px) saturate(160%) brightness(.55)}
  .jc-vidro,.jc-painel{-webkit-backdrop-filter:blur(24px) saturate(120%)}
  @media (max-width:760px){.q-palco.cenas,.q-palco.comparar,.q-palco.dg,.q-palco.fecho,.cf-mesa,.valores{-webkit-backdrop-filter:blur(16px) saturate(150%) brightness(.55)}}
  /* o WebKit do Playwright no Windows calcula o filtro mas não o pinta (nem blur nem brightness): a leitura não pode depender
     dele. Véu quase opaco na barra e nos painéis fumê; o vidro fica no aro, no reflexo e no tint. */
  .jc-nav[data-modo="escuro"]{--lg-tint:rgb(13 37 51 / .92)}
  .jc-nav[data-modo="claro"]{--lg-tint:rgb(246 243 238 / .92)}
  #quem-sao .q-palco.fu-org,.fde .fde__cab{--lg-veu1:.88;--lg-veu2:.9}
}