/* ═══════════════════════════════════════════════════════════════════════
   John's Company · DS v5 · components.css
   STATUS: proposta v5, sujeita a João.
   Regra: ZERO hex e zero rgb() de cor aqui. Tudo vem de tokens.css por
   var(). O mesmo componente funciona nos dois modos porque só lê tokens
   semânticos; o modo é declarado por [data-modo] ou por .estr-<nome>.
   Origem de cada peça: 02-direcao.md §5 (sigla:linha do inventário).
   Importar DEPOIS de tokens.css. Caminhos relativos a ds-v5/.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--fundo);color:var(--corpo);min-height:100vh;font:400 var(--t-corpo)/var(--lh-corpo) var(--f-texto);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg{display:block;max-width:100%;height:auto}
strong,b{font-weight:800}
a,button,summary,[role=button]{touch-action:manipulation}
button{font:inherit;color:inherit}

/* toda superfície que declara modo ou estrutura pinta o próprio chão */
:where([data-modo],.estr-mesh,.estr-profundo,.estr-noite,.estr-ouro,.estr-papel,.estr-nevoa,.estr-pedra,.estr-sinal){background:var(--fundo);color:var(--corpo)}
/* perf (06/11): sem background-attachment:fixed na raiz. Ele repintava a página inteira a cada quadro de rolagem
   (1440, A/B: 53% → 20% de quadros > 20 ms) e não aparecia: o body pinta chão opaco (partes.css) por cima dele */
::selection{background:var(--selecao-fundo);color:var(--selecao-tinta)}

/* foco por modo (F8): o anel segue o raio do componente */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:var(--foco-largura) solid var(--foco);outline-offset:var(--foco-desloc)}
:where(main):focus{outline:none}

.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.jc-largura{width:min(var(--largura),100% - 2 * var(--margem));margin-inline:auto}
.jc-largura-l{width:min(var(--largura-l),100% - 2 * var(--margem));margin-inline:auto}
.jc-secao{position:relative;padding-block:var(--e-7)}
@media (min-width:1024px){.jc-secao{padding-block:var(--e-8)}}

/* ── materiais ─────────────────────────────────────────────────────────── */
.jc-mesh--vivo{background:var(--mat-mesh-vivo)}
.jc-mesh--noite{background:var(--mat-mesh-noite)}
.jc-mesh--claro{background:var(--mat-mesh-claro)}
.jc-pedra{background:var(--mat-pedra)}
.jc-material{background:var(--mat-modo)}   /* escuro: mesh-noite · claro: Pedra */
.jc-chao{background:var(--chao)}
.jc-chao--alt{background:var(--chao-alt)}

/* grão: PNG fixo como máscara; cor, alfa e mistura vêm do modo
   (escuro: branco .09 overlay · claro: noite .05 multiply). Pseudo ::after
   é reservado para o grão nestes elementos. */
.jc-grao,.jc-material,.jc-mesh--vivo,.jc-mesh--noite,.jc-mesh--claro,.estr-mesh,.estr-noite,.estr-papel{position:relative;isolation:isolate}
.jc-grao::after,.jc-material::after,.estr-papel::after,.jc-mesh--vivo::after,.jc-mesh--noite::after,.jc-mesh--claro::after,.estr-mesh::after,.estr-noite::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:var(--grao-cor);opacity:var(--grao-alfa);mix-blend-mode:var(--grao-mistura);
  -webkit-mask:var(--grao) 0 0 / 220px 220px repeat;mask:var(--grao) 0 0 / 220px 220px repeat}

/* mesh animado — só LP (02 §6.2). 4 orbes, só transform, pausável com .jc-pausa */
.jc-mesh-vivo{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--teal-noite)}
.jc-mesh-vivo i{position:absolute;width:90vmax;aspect-ratio:1;border-radius:50%;will-change:transform}
.jc-mesh-vivo i:nth-child(1){left:-20vmax;top:-25vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--teal-vivo) 62%,transparent),color-mix(in srgb,var(--teal-vivo) 28%,transparent) 45%,transparent);animation:jc-m1 26s ease-in-out infinite alternate}
.jc-mesh-vivo i:nth-child(2){right:-25vmax;top:10vh;background:radial-gradient(closest-side,color-mix(in srgb,var(--luz-mesh) 40%,transparent),color-mix(in srgb,var(--luz-mesh) 16%,transparent) 45%,transparent);animation:jc-m2 32s ease-in-out infinite alternate}
.jc-mesh-vivo i:nth-child(3){left:15vw;bottom:-35vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--teal-profundo) 85%,transparent),color-mix(in srgb,var(--teal-profundo) 30%,transparent) 60%,transparent);animation:jc-m3 28s ease-in-out infinite alternate}
.jc-mesh-vivo i:nth-child(4){left:35vw;top:30vh;width:60vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--luz-mesh) 34%,transparent),color-mix(in srgb,var(--luz-mesh) 10%,transparent) 55%,transparent);animation:jc-m4 22s ease-in-out infinite alternate}
.jc-mesh-vivo::after{content:"";position:absolute;inset:0;background:var(--branco);opacity:.09;mix-blend-mode:overlay;-webkit-mask:var(--grao) 0 0/220px 220px repeat;mask:var(--grao) 0 0/220px 220px repeat}
.jc-pausa .jc-mesh-vivo i{animation-play-state:paused}
@keyframes jc-m1{to{transform:translate(18vw,22vh) scale(1.15)}}
@keyframes jc-m2{to{transform:translate(-22vw,18vh) scale(.9)}}
@keyframes jc-m3{to{transform:translate(20vw,-14vh) scale(1.1)}}
@keyframes jc-m4{to{transform:translate(-26vw,-20vh) scale(1.3)}}

/* ── tipografia ────────────────────────────────────────────────────────── */
.jc-titulo{margin:0;font-family:var(--f-titulo);font-weight:900;color:var(--titulo);text-wrap:balance}
.jc-titulo em{font-style:normal;color:var(--titulo-2)}
.jc-titulo--display{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.jc-titulo--h1{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1)}
.jc-titulo--h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);max-width:var(--ch-h2)}
.jc-titulo--h3{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3)}
.jc-h4{margin:0;font:800 var(--t-h4)/var(--lh-h4) var(--f-texto);color:var(--titulo)}
.jc-lead{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);max-width:var(--ch-lead);color:var(--corpo);text-wrap:pretty}
.jc-corpo{margin:0;font-size:var(--t-corpo);line-height:var(--lh-corpo);max-width:var(--ch-corpo);color:var(--corpo);text-wrap:pretty}
.jc-apoio{margin:0;font-size:var(--t-apoio);line-height:var(--lh-apoio);color:var(--secundario)}
@media (max-width:600px){:root{--t-corpo:17px}}

/* rótulo com fio (SC:87-88): texto, nunca pílula */
.jc-rotulo{display:flex;align-items:center;gap:14px;margin:0 0 28px;font:800 var(--t-rotulo)/1.2 var(--f-texto);letter-spacing:var(--tr-rotulo);text-transform:uppercase;color:var(--acento-texto)}
.jc-rotulo::before{content:"";flex:none;width:28px;height:2px;border-radius:2px;background:currentColor}

/* número / dado (02 §5.2) — número só com fonte */
.jc-numero{display:block;margin:0;font:900 var(--t-numero)/var(--lh-numero) var(--f-titulo);letter-spacing:var(--tr-numero);color:var(--numero);font-variant-numeric:tabular-nums}
.jc-numero--badge{display:inline-block;padding:.12em .3em .06em;border-radius:var(--raio-m);background:var(--amarelo);color:var(--teal-noite);font-size:clamp(28px,3vw,40px);letter-spacing:-.02em}
.jc-dado{display:grid;gap:var(--e-2);align-content:start}
.jc-dado__legenda{margin:0;font:600 var(--t-apoio)/1.45 var(--f-texto);color:var(--corpo);max-width:34ch}
.jc-dado__fonte{margin:0;font-size:14px;line-height:1.45;color:var(--secundario)}

.jc-grifo{background:var(--amarelo);color:var(--preto-marca);box-shadow:inset 0 -.14em 0 var(--grifo-fio);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* verbos: pausa tipográfica (SC:147-150) */
.jc-verbos{list-style:none;margin:0;padding:0;display:grid}
.jc-verbos li{display:grid;grid-template-columns:auto 1fr;gap:var(--e-5);align-items:center;padding:12px 0;border-bottom:1px solid var(--fio)}
.jc-verbos strong{font:900 clamp(52px,10vw,144px)/.88 var(--f-titulo);letter-spacing:-.045em;color:var(--titulo)}
.jc-verbos span{color:var(--corpo);max-width:30ch;line-height:1.45}
@media (max-width:760px){.jc-verbos li{grid-template-columns:1fr;gap:8px}}

/* etiqueta de estrutura (EC:12): tipo da peça no topo. Texto + quadrado do canto do J, sem pílula */
.jc-etiqueta{display:inline-flex;align-items:center;gap:10px;font:800 var(--t-rotulo)/1.2 var(--f-texto);letter-spacing:var(--tr-rotulo);text-transform:uppercase;color:var(--secundario)}
.jc-etiqueta::before{content:"";flex:none;width:10px;height:10px;border-radius:3px 3px 3px 1px;background:var(--acento-quente);box-shadow:inset 0 0 0 1px var(--fio-forte)}

/* selo */
.jc-selo{display:inline-flex;align-items:center;gap:.6em;padding:.6em 1.1em;border-radius:var(--raio-pilula);background:var(--acento-quente);color:var(--tinta-sobre-area);font:800 13px/1 var(--f-texto);letter-spacing:var(--tr-rotulo);text-transform:uppercase}

/* ── marca ─────────────────────────────────────────────────────────────── */
/* letreiro: SVG oficial pela superfície (BB:186-195). Uma vez por peça. */
.jc-logo{display:block;width:auto;height:32px;aspect-ratio:743/208;background:var(--logo) left center/contain no-repeat}
.jc-simbolo{display:block;height:64px;aspect-ratio:886/1452;background:var(--simbolo) center/contain no-repeat}
/* objeto de capa (TK:127-130): capa teal-vivo + J amarelo (4,86) */
.jc-objeto-capa{display:grid;place-items:center;aspect-ratio:3/4;width:100%;max-width:280px;border-radius:6% / 4.5%;background:var(--teal-vivo);box-shadow:var(--objeto-capa-sombra)}
.jc-objeto-capa .jc-simbolo{height:42%;background-image:var(--simbolo-capa)}

/* ícone oficial (18, máscara; hash = acervo). Nunca Lucide/Material/emoji. */
.jc-icone{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.14em;background:var(--icone);-webkit-mask:var(--svg) center/contain no-repeat;mask:var(--svg) center/contain no-repeat}
.jc-icone--disco{display:inline-grid;place-items:center;width:2.25em;height:2.25em;border-radius:50%;background:var(--icone-disco);box-shadow:inset 0 0 0 1px var(--icone-disco-anel);-webkit-mask:none;mask:none}
.jc-icone--disco::before{content:"";width:1em;height:1em;background:var(--icone);-webkit-mask:var(--svg) center/contain no-repeat;mask:var(--svg) center/contain no-repeat}
.i-agente{--svg:url('../assets/icones/agente.svg')}
.i-alerta{--svg:url('../assets/icones/alerta.svg')}
.i-chave{--svg:url('../assets/icones/chave.svg')}
.i-check{--svg:url('../assets/icones/check.svg')}
.i-conversa{--svg:url('../assets/icones/conversa.svg')}
.i-crescimento{--svg:url('../assets/icones/crescimento.svg')}
.i-etapa{--svg:url('../assets/icones/etapa.svg')}
.i-fluxo{--svg:url('../assets/icones/fluxo.svg')}
.i-gargalo{--svg:url('../assets/icones/gargalo.svg')}
.i-metrica{--svg:url('../assets/icones/metrica.svg')}
.i-parada{--svg:url('../assets/icones/parada.svg')}
.i-propriedade{--svg:url('../assets/icones/propriedade.svg')}
.i-raiox{--svg:url('../assets/icones/raiox.svg')}
.i-relatorio{--svg:url('../assets/icones/relatorio.svg')}
.i-seta-baixo{--svg:url('../assets/icones/seta-baixo.svg')}
.i-seta-dir{--svg:url('../assets/icones/seta-dir.svg')}
.i-seta{--svg:url('../assets/icones/seta.svg')}
.i-tempo{--svg:url('../assets/icones/tempo.svg')}
.i-vendas{--svg:url('../assets/icones/vendas.svg')}
.i-marketing{--svg:url('../assets/icones/marketing.svg')}
.i-suporte{--svg:url('../assets/icones/suporte.svg')}
.i-financeiro{--svg:url('../assets/icones/financeiro.svg')}
.i-operacoes{--svg:url('../assets/icones/operacoes.svg')}
.i-dono{--svg:url('../assets/icones/dono.svg')}
.i-rodou{--svg:url('../assets/icones/rodou.svg')}
.i-rodando{--svg:url('../assets/icones/rodando.svg')}
.i-aguarda{--svg:url('../assets/icones/aguarda.svg')}
.i-pausada{--svg:url('../assets/icones/pausada.svg')}
.i-equipe{--svg:url('../assets/icones/equipe.svg')}
.i-clientes{--svg:url('../assets/icones/clientes.svg')}
.i-regras{--svg:url('../assets/icones/regras.svg')}
.i-jeito-da-casa{--svg:url('../assets/icones/jeito-da-casa.svg')}
.i-entende{--svg:url('../assets/icones/entende.svg')}
.i-constroi{--svg:url('../assets/icones/constroi.svg')}
.i-coloca-em-uso{--svg:url('../assets/icones/coloca-em-uso.svg')}

/* ── ação e navegação ──────────────────────────────────────────────────── */
/* botão (SC:23-37 · J-3): escuro = degradê oficial + varrida + brilho;
   claro = pílula profunda + disco amarelo (button-in-button). */
.jc-botao{--alt:56px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:var(--alt);padding:0 var(--botao-recuo) 0 28px;border:0;border-radius:var(--raio-pilula);
  background:var(--botao-fundo);color:var(--botao-tinta);box-shadow:var(--botao-sombra);
  font:800 17px/1.1 var(--f-texto);white-space:nowrap;text-decoration:none;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  transition:transform var(--m-hover) var(--m-entra),box-shadow var(--m-hover) var(--m-entra)}
.jc-botao::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--botao-varrida);transform:translateX(-120%);transition:transform var(--m-apaga) var(--m-entra)}
.jc-botao__seta{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--botao-disco);color:var(--botao-disco-tinta);transition:transform var(--m-hover) var(--m-entra)}
.jc-botao__seta .jc-icone{width:18px;height:18px;background:currentColor}
@media (hover:hover){
  .jc-botao:hover{transform:translateY(-2px);box-shadow:var(--botao-sombra-hover)}
  .jc-botao:hover::after{transform:translateX(120%)}
  .jc-botao:hover .jc-botao__seta{transform:translateX(4px)}
}
.jc-botao:active{transform:scale(.97);transition-duration:var(--m-toque)}
.jc-botao:focus-visible{outline-offset:var(--foco-desloc)}
.jc-botao:disabled,.jc-botao[aria-disabled="true"]{background:var(--botao-desab-fundo);color:var(--botao-desab-tinta);box-shadow:none;cursor:not-allowed;transform:none}
.jc-botao:disabled::after,.jc-botao[aria-disabled="true"]::after{display:none}
.jc-botao:disabled .jc-botao__seta,.jc-botao[aria-disabled="true"] .jc-botao__seta{background:transparent;color:inherit;transform:none}
.jc-botao--p{--alt:44px;padding-left:20px;font-size:15px;gap:10px}
.jc-botao--p .jc-botao__seta{width:28px;height:28px}
@media (max-width:480px){.jc-botao--largo{width:100%;white-space:normal;text-align:center}}

/* link com seta (SC:93-95) */
.jc-link-seta{padding:0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;font:800 16px/1.2 var(--f-texto);color:var(--acento-texto);text-decoration:none;border-radius:var(--raio-p)}
.jc-link-seta .jc-icone{width:18px;height:18px;background:currentColor;transition:transform var(--m-hover) var(--m-entra)}
@media (hover:hover){.jc-link-seta:hover .jc-icone{transform:translateX(4px)}}
.jc-link-seta:active .jc-icone{transform:translateX(2px);transition-duration:var(--m-toque)}

/* pular para o conteúdo (SC:19-20) */
.jc-pular{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:var(--raio-pilula);background:var(--amarelo);color:var(--teal-noite);font-weight:800;text-decoration:none;box-shadow:0 0 0 2px var(--titulo)}
.jc-pular:focus{top:calc(16px + env(safe-area-inset-top,0px))}

/* nav em pílula flutuante (SC:40-55) — vidro "C" no escuro, fosco no claro */
.jc-nav{position:fixed;inset:calc(16px + env(safe-area-inset-top,0px)) 0 auto;z-index:40;display:flex;justify-content:center;
  padding:0 max(var(--margem),env(safe-area-inset-right,0px)) 0 max(var(--margem),env(safe-area-inset-left,0px));pointer-events:none;background:none}
.jc-nav__pilula{pointer-events:auto;position:relative;isolation:isolate;display:flex;align-items:center;gap:var(--e-3);width:min(1120px,100%);
  padding:6px 6px 6px 22px;border-radius:var(--raio-pilula);background:var(--nav-veu);
  -webkit-backdrop-filter:var(--nav-filtro);backdrop-filter:var(--nav-filtro);box-shadow:var(--nav-sombra);
  transition:width var(--m-medio) var(--m-entra)}
.jc-nav[data-compacta] .jc-nav__pilula{width:min(860px,100%);background:var(--nav-veu-compacta)}
.jc-nav__marca{display:inline-flex;align-items:center;min-height:44px;border-radius:var(--raio-p)}
.jc-nav__marca .jc-logo{height:28px}
.jc-nav__links{display:flex;gap:2px;margin:0 0 0 auto;padding:0;list-style:none}
.jc-nav__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--raio-pilula);font:600 15px/1 var(--f-texto);color:var(--nav-link);text-decoration:none;transition:color var(--m-curto) ease,background-color var(--m-curto) ease}
.jc-nav__links a span{margin-right:8px;font:800 13px/1 var(--f-texto);letter-spacing:.08em;color:var(--nav-num)}
.jc-nav__links a[aria-current]{color:var(--nav-link-ativo);background:var(--nav-hover)}
@media (hover:hover){.jc-nav__links a:hover{color:var(--nav-link-ativo);background:var(--nav-hover)}}
@media (max-width:960px){.jc-nav__links{display:none}.jc-nav__pilula{gap:12px;padding-left:16px}.jc-nav__marca{margin-right:auto}}

/* alternador de modo: botão com estado (aria-pressed); amostra dos dois chãos, sem ícone genérico */
.jc-modo{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border:0;border-radius:var(--raio-pilula);
  background:var(--nav-hover);color:var(--nav-link-ativo);font:800 14px/1 var(--f-texto);cursor:pointer;transition:background-color var(--m-curto) ease}
.jc-modo::before{content:"";width:20px;height:20px;border-radius:50%;background:linear-gradient(90deg,var(--teal-noite) 50%,var(--off-white) 50%);box-shadow:inset 0 0 0 1px var(--fio-forte),0 0 0 1px var(--fio-forte)}
@media (hover:hover){.jc-modo:hover{background:var(--fio-forte)}}
.jc-modo:active{transform:scale(.97)}

/* ── superfícies com o canto do J ──────────────────────────────────────── */
/* vidro: B no escuro, fosco claro no claro. Só sobre material (mesh, arte, pedra, palco). */
.jc-vidro,.jc-painel{position:relative;isolation:isolate;border-radius:var(--raio-painel-j);padding:var(--e-4);color:var(--corpo)}
.jc-vidro{
  background:var(--vidro-grao),radial-gradient(120% 60% at var(--px) var(--py),var(--vidro-reflexo),transparent 55%),var(--vidro-ambar),var(--vidro-veu);
  box-shadow:var(--vidro-labios),var(--sombra-1)}
/* painel: vidro B no escuro, placa elevada no claro (vidro claro em off-white liso some) */
.jc-painel{
  background:var(--painel-grao),radial-gradient(120% 60% at var(--px) var(--py),var(--painel-reflexo),transparent 55%),var(--painel-fundo);
  box-shadow:var(--painel-labios),var(--sombra-1)}
.jc-vidro::before,.jc-painel::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;
  -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)}
.jc-vidro::before{background:var(--vidro-borda)}
.jc-painel::before{background:var(--painel-borda)}
.jc-vidro--g,.jc-painel--g{border-radius:var(--raio-g-j);padding:var(--e-3)}
.jc-vidro--leve{position:relative;border-radius:var(--raio-g-j);padding:10px 16px;background:var(--vidro-leve);border:1px solid var(--vidro-leve-borda);
  box-shadow:var(--sombra-1)}

/* placa elevada sólida (novo v5) */
.jc-elevado{position:relative;border-radius:var(--raio-painel-j);padding:var(--e-4);background:var(--elevado);color:var(--corpo);box-shadow:inset 0 0 0 1px var(--elevado-fio),var(--sombra-1)}
.jc-elevado--g{border-radius:var(--raio-g-j);padding:var(--e-3)}
/* faixa de 4 px no topo: o quente como área (claro) */
.jc-faixa-topo{box-shadow:inset 0 4px 0 var(--acento-area),inset 0 0 0 1px var(--elevado-fio),var(--sombra-1)}

/* interação dos painéis que são link */
a.jc-painel,a.jc-elevado,a.jc-vidro,.jc-cartao-link{text-decoration:none;transition:transform var(--m-hover) var(--m-entra),box-shadow var(--m-hover) var(--m-entra),--px .5s var(--m-entra),--py .5s var(--m-entra)}
@media (hover:hover){
  a.jc-painel:hover,.jc-cartao-link:hover{transform:translateY(-4px);box-shadow:var(--painel-labios-hover),var(--sombra-2)}
  a.jc-elevado:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--elevado-fio),var(--sombra-2)}
}
a.jc-painel:active,a.jc-elevado:active,.jc-cartao-link:active{transform:scale(.985);transition-duration:var(--m-toque)}

/* cartão-link "próxima" (SC:253-258) */
.jc-cartao-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 24px;padding:var(--e-5)}
.jc-cartao-link .jc-rotulo{grid-column:1/-1;margin:0}
.jc-cartao-link__nome{font:900 clamp(30px,4vw,60px)/1 var(--f-titulo);letter-spacing:-.025em;color:var(--titulo);overflow-wrap:break-word;min-width:0}
.jc-cartao-link__seta{width:48px;height:48px;background:var(--acento-texto);transition:transform var(--m-hover) var(--m-entra)}
.jc-cartao-link p{grid-column:1/-1;margin:0;color:var(--secundario);font-size:var(--t-apoio)}
@media (hover:hover){.jc-cartao-link:hover .jc-cartao-link__seta{transform:translateX(8px)}}
@media (max-width:480px){.jc-cartao-link{padding:var(--e-4) var(--e-3)}.jc-cartao-link__seta{width:36px;height:36px}}

/* palco escuro dentro do claro (novo v5, J-5): moldura (lê o modo do pai)
   + cena (estrutura escura). Único lugar com "double bezel". */
.jc-palco{position:relative;margin:0;border-radius:var(--raio-palco-j);box-shadow:var(--sombra-2)}
.jc-palco__cena{position:relative;isolation:isolate;overflow:hidden;height:100%;border-radius:inherit;padding:var(--e-5);box-shadow:var(--palco-moldura)}
.jc-palco__cena>*{position:relative;z-index:1}
@media (max-width:600px){.jc-palco__cena{padding:var(--e-4) var(--e-3)}}

/* legenda de figura (MC:78-79, 365) */
.jc-legenda{margin-top:var(--e-2);font:400 var(--t-apoio)/var(--lh-apoio) var(--f-texto);color:var(--secundario);max-width:68ch}
.jc-legenda b{color:var(--corpo);font-weight:800}

/* ── conteúdo e método ─────────────────────────────────────────────────── */
/* lista com fio (SC:229-233) */
.jc-lista-fio{list-style:none;margin:0;padding:0;display:grid}
.jc-lista-fio li{position:relative;padding:16px 0 16px 28px;border-bottom:1px solid var(--fio);color:var(--corpo)}
.jc-lista-fio li::before{content:"";position:absolute;left:0;top:calc(16px + .75em);width:12px;height:2px;background:var(--marcador)}
.jc-lista-fio--grande li{padding:22px 0 22px 36px;font:900 clamp(22px,2vw,30px)/1.15 var(--f-titulo);letter-spacing:-.01em;color:var(--titulo)}
.jc-lista-fio--grande li::before{top:calc(22px + .55em);width:18px}

/* passos numerados (SC:236-239) */
.jc-passos{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:var(--e-5)}
.jc-passos>li{counter-increment:p;position:relative;padding-left:72px;display:grid;gap:10px;color:var(--corpo)}
.jc-passos>li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:0;font:900 40px/1 var(--f-titulo);color:var(--numero)}
.jc-passos h3,.jc-passos .jc-h4{margin:0}

/* checks (SC:171-176): disco amarelo + check oficial. Sem brilho externo
   (02 §7.1-5: o único brilho é o do botão primário escuro). */
.jc-checks{list-style:none;margin:0;padding:0;display:grid}
.jc-checks li{position:relative;padding:20px 0 20px 60px;border-bottom:1px solid var(--fio);color:var(--titulo);font-size:clamp(17px,1.4vw,20px);line-height:1.4}
.jc-checks li::before{content:"";position:absolute;left:0;top:calc(20px + .7em - 18px);width:36px;height:36px;border-radius:50%;background:var(--acento-quente);box-shadow:inset 0 0 0 1px var(--check-anel);transition:background-color var(--m-medio) var(--m-entra)}
.jc-checks li::after{content:"";position:absolute;left:8px;top:calc(20px + .7em - 10px);width:20px;height:20px;background:var(--tinta-sobre-area);-webkit-mask:url('../assets/icones/check.svg') center/contain no-repeat;mask:url('../assets/icones/check.svg') center/contain no-repeat;transition:opacity var(--m-curto) ease}
/* estado "a marcar" (opcional, com JS): só o anel */
.jc-checks li[data-pendente]::before{background:transparent;box-shadow:inset 0 0 0 2px var(--fio-informa)}
.jc-checks li[data-pendente]::after{opacity:0}

/* cadeia (MC:342-348): passo humano preenchido = pessoa decide */
.jc-cadeia{list-style:none;counter-reset:elo;margin:0;padding:0;display:grid}
.jc-cadeia>li{counter-increment:elo;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--fio)}
.jc-cadeia>li:last-child{border-bottom:0}
.jc-cadeia>li::before{content:counter(elo);grid-row:span 2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:800 14px/1 var(--f-texto);color:var(--acento-texto);box-shadow:inset 0 0 0 1.5px var(--fio-informa)}
.jc-cadeia>li.humano::before{background:var(--acento-quente);color:var(--tinta-sobre-area);box-shadow:inset 0 0 0 1px var(--check-anel)}
.jc-cadeia b{font:800 clamp(17px,1.3vw,19px)/1.3 var(--f-texto);color:var(--titulo)}
.jc-cadeia span{color:var(--secundario);font-size:16px;line-height:1.5}
/* variante trilho horizontal (deck/desktop): nós ligados por um fio */
@media (min-width:900px){
  .jc-cadeia--trilho{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--e-3)}
  .jc-cadeia--trilho>li{position:relative;grid-template-columns:1fr;grid-template-rows:auto auto auto;border-bottom:0;padding:0}
  .jc-cadeia--trilho>li::before{grid-row:auto;margin-bottom:var(--e-2)}
  .jc-cadeia--trilho>li:not(:last-child)::after{content:"";position:absolute;left:44px;right:calc(var(--e-3) * -1 + 8px);top:15px;height:2px;background:var(--fio-forte)}
}

/* trilha de etapas (MC:395-398) */
.jc-trilha{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:5px;margin:0;padding:0;list-style:none}
.jc-trilha>i{display:block;height:4px;border-radius:4px;background:var(--trilha-vazio);transition:background-color var(--m-medio) var(--m-entra)}
.jc-trilha>i.feito{background:var(--trilha-feito)}
.jc-trilha>i.atual{background:var(--acento-quente);box-shadow:inset 0 0 0 1px var(--trilha-atual-anel)}

/* cartão de etapa (MC:383-393): altura reservada para não pular */
.jc-cartao-etapa{display:grid;gap:10px;max-width:440px}
.jc-cartao-etapa .jc-trilha{margin-bottom:6px}
.jc-cartao-etapa__rot{font:800 var(--t-rotulo)/1 var(--f-texto);letter-spacing:var(--tr-rotulo);text-transform:uppercase;color:var(--acento-texto)}
.jc-cartao-etapa__nome{margin:0;font:900 clamp(22px,1.9vw,28px)/1.05 var(--f-titulo);color:var(--titulo)}
.jc-cartao-etapa p:not(.jc-cartao-etapa__nome){margin:0;font-size:16px;line-height:1.5;color:var(--corpo);min-height:3em}
.jc-cartao-etapa__retorno{display:flex;gap:8px;align-items:center;font:800 14px/1.35 var(--f-texto);color:var(--retorno)}
.jc-cartao-etapa__retorno[hidden]{display:flex;visibility:hidden}
.jc-cartao-etapa__retorno .jc-icone{background:currentColor}

/* acordeão (MC:352-358): summary ≥ 44 px, + que gira 45° */
.jc-detalhe{border-top:1px solid var(--fio-forte)}
.jc-detalhe:last-of-type{border-bottom:1px solid var(--fio-forte)}
.jc-detalhe>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none;
  font:800 17px/1.3 var(--f-texto);color:var(--titulo);border-radius:var(--raio-p)}
.jc-detalhe>summary::-webkit-details-marker{display:none}
.jc-detalhe>summary::after{content:"";flex:none;width:18px;height:18px;color:var(--acento-texto);
  background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
  transition:rotate var(--m-medio) var(--m-entra)}
.jc-detalhe[open]>summary::after{rotate:45deg}
.jc-detalhe__corpo{padding:0 0 20px;color:var(--corpo);max-width:62ch}
.jc-detalhe[open] .jc-detalhe__corpo{animation:jc-nasce var(--m-medio) var(--m-entra)}
@keyframes jc-nasce{from{opacity:0;transform:translateY(-6px)}}

/* nota, alerta, limite (SC:234-235, 252; MC:349-351) */
.jc-nota{margin:0;padding-left:18px;border-left:2px solid var(--acento-linha);color:var(--corpo);font-size:clamp(16px,1.2vw,18px);line-height:1.55;max-width:60ch}
.jc-nota b{color:var(--titulo)}
.jc-alerta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:18px 22px;border-radius:var(--raio-g-j);background:var(--alerta-fundo);box-shadow:inset 3px 0 0 var(--aviso-linha);color:var(--titulo);font-weight:600;line-height:1.45}
.jc-alerta .jc-icone{--icone:var(--aviso-icone);width:22px;height:22px;margin-top:1px}
.jc-limite{margin:0;padding:28px 32px;border-radius:var(--raio-painel-j);background:var(--limite-fundo);box-shadow:inset 0 0 0 1px var(--limite-anel);font:900 clamp(22px,2vw,30px)/1.2 var(--f-titulo);color:var(--titulo)}

/* o que não prometemos (SC:151-155) */
.jc-nao{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.jc-nao li{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:var(--raio-pilula);box-shadow:inset 0 0 0 1px var(--fio-forte);color:var(--titulo);font-weight:600}
.jc-nao li .jc-icone{--icone:var(--icone-nao);width:16px;height:16px}
.jc-nao s{text-decoration:none;background:linear-gradient(var(--nao-risco),var(--nao-risco)) no-repeat 0 55% / 100% 2px}

/* grade de propriedade (SC:160-165) */
.jc-grade-propriedade{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--e-5)}
.jc-grade-propriedade__divisor{width:2px;background:var(--divisor-propriedade)}
.jc-grade-propriedade h3{margin:0 0 var(--e-3)}
.jc-grade-propriedade ul{list-style:none;margin:0;padding:0;display:grid}
.jc-grade-propriedade li{padding:16px 0;border-bottom:1px solid var(--fio);color:var(--titulo);font-size:clamp(17px,1.4vw,20px)}
@media (max-width:760px){.jc-grade-propriedade{grid-template-columns:minmax(0,1fr);gap:var(--e-4)}.jc-grade-propriedade__divisor{width:auto;height:2px;background:var(--divisor-propriedade-h)}}

/* citação (deck 9): aspas decorativas em ouro, só com fonte real */
.jc-citacao{margin:0;display:grid;gap:var(--e-3)}
.jc-citacao::before{content:"\201C";display:block;height:.42em;font:900 clamp(120px,14vw,220px)/.8 var(--f-titulo);color:var(--acento-linha)}
.jc-citacao blockquote{margin:0}
.jc-citacao blockquote p{margin:0;font:900 clamp(28px,3.6vw,52px)/1.04 var(--f-titulo);letter-spacing:-.02em;color:var(--titulo);max-width:22ch;text-wrap:balance}
.jc-citacao figcaption{font-size:var(--t-apoio);color:var(--secundario)}
.jc-citacao figcaption b{color:var(--corpo)}

/* estados (MC:361-364): legenda obrigatória */
.jc-estados{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:var(--e-2)}
.jc-estados>li{display:grid;gap:8px;align-content:start}
.jc-estados b{font:900 22px/1.05 var(--f-titulo);color:var(--titulo)}
.jc-estados span{color:var(--corpo);line-height:1.45}

/* tabela (SC:247-251): colapsa em 1 coluna ≤ 860 */
.jc-tabela{display:grid;border-radius:var(--raio-painel-j);overflow:hidden;background:var(--elevado);box-shadow:inset 0 0 0 1px var(--fio-forte)}
.jc-tabela__linha{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(0,1fr) minmax(0,1fr);gap:var(--e-3);padding:16px 24px;border-bottom:1px solid var(--fio);font-size:16px;line-height:1.45;color:var(--corpo)}
.jc-tabela__linha:last-child{border-bottom:0}
.jc-tabela__linha:nth-child(odd):not(.jc-tabela__cab){background:var(--tabela-zebra)}
.jc-tabela__cab{background:var(--tabela-cab);font-weight:800;color:var(--titulo)}
.jc-tabela [role=rowheader]{font-weight:800;color:var(--tabela-rotulo)}
.jc-tabela [data-destaque]{color:var(--titulo);font-weight:600}
@media (max-width:860px){
  .jc-tabela__linha{grid-template-columns:minmax(0,1fr);gap:6px}
  .jc-tabela__cab{display:none}
  .jc-tabela [role=cell]::before{content:attr(data-rotulo);display:block;font:800 12px/1.4 var(--f-texto);letter-spacing:var(--tr-rotulo);text-transform:uppercase;color:var(--secundario)}
}

/* gráfico de barras simples (DS:259): série 1 / série 2 por modo */
.jc-grafico{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.jc-grafico li{display:grid;grid-template-columns:minmax(90px,.4fr) minmax(0,1fr) auto;gap:14px;align-items:center;font-size:15px;color:var(--corpo)}
.jc-grafico i{display:block;height:14px;border-radius:0 var(--raio-p) var(--raio-p) 0;width:var(--v);background:var(--dado-1)}
.jc-grafico li.s2 i{background:var(--dado-2)}
.jc-grafico b{font-variant-numeric:tabular-nums;color:var(--titulo)}

/* ── fallbacks (02 §8.1) ──────────────────────────────────────────────── */
@media (prefers-reduced-transparency:reduce){
  .jc-vidro,.jc-nav__pilula,.jc-vidro--leve{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--vidro-solido)}
  .jc-painel{background:var(--painel-solido)}
}
@media (prefers-contrast:more){
  .jc-vidro{background:var(--vidro-contraste)}
  .jc-painel{background:var(--painel-solido)}
  :root,[data-modo],[class*="estr-"]{--fio:var(--fio-forte)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .jc-vidro,.jc-nav__pilula{background:var(--vidro-solido)}
  .jc-painel{background:var(--painel-solido)}
}
@media (hover:none){
  .jc-botao:active,.jc-link-seta:active{opacity:.92}
}
@media (pointer:coarse){
  .jc-link-seta,.jc-nav__marca{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .jc-mesh-vivo i{animation:none!important}
}