/* John's Company · site v4 · partes comuns (index, privacidade, agenda): superfícies, nav, botão fixo, rodapé, páginas internas e o chat.
   As 8 partes da home ficam em partes.css. Nenhuma cor aqui: toda tinta vem dos tokens do DS v5. */

:root{--t-h2:clamp(32px,4.4vw,64px);--ch-h2:22ch;--t-apoio:16px}
html{scroll-padding-top:104px}
.jc-selo{font-size:14px}
.sec-cab{display:grid;gap:var(--e-3);margin-bottom:var(--e-6);max-width:920px}
.sec-cab .jc-rotulo{margin:0}
.sec-cab .jc-lead{margin-top:var(--e-1)}
.borda-topo{border-top:1px solid var(--fio)}
.jc-lead,.jc-corpo{max-width:none}
.jc-lead{max-width:60ch}
.jc-corpo{max-width:68ch}
.marcador{display:inline-block;padding:.12em .5em;border:2px dashed var(--fio-informa);border-radius:var(--raio-m);font-weight:800;overflow-wrap:anywhere}

/* ── superfícies: receitas do portal v5 (portal-v5.app.css, 24/10), que prevalecem (regente, 27/10) ──
   Claro = off-white (mat-papel) + mesh do portal, como no .fmt-app; o véu claro fica nos cards e na nav, como no portal. Escuro = estruturas do DS.
   Cards = vidro do portal com borda de luz. Só tokens: o alfa vem de color-mix sobre --branco e --off-white-placa (mesmo resultado da receita do portal). */
:root{
  --b55:color-mix(in srgb,var(--branco) 55%,transparent);--b62:color-mix(in srgb,var(--branco) 62%,transparent);
  --p46:color-mix(in srgb,var(--off-white-placa) 46%,transparent);--p72:color-mix(in srgb,var(--off-white-placa) 72%,transparent);--p90:color-mix(in srgb,var(--off-white-placa) 90%,transparent);
  --mesh-portal:
   radial-gradient(38% 30% at 0% 0%,color-mix(in srgb,var(--amarelo) 70%,transparent),color-mix(in srgb,var(--amarelo) 26%,transparent) 55%,transparent 100%),
   radial-gradient(26% 20% at 0% 50%,color-mix(in srgb,var(--ouro-degrade) 36%,transparent),transparent 100%),
   radial-gradient(34% 26% at 0% 100%,color-mix(in srgb,var(--amarelo) 46%,transparent),transparent 100%),
   radial-gradient(40% 32% at 100% 0%,color-mix(in srgb,var(--teal-vivo) 52%,transparent),color-mix(in srgb,var(--luz-mesh) 30%,transparent) 50%,transparent 100%),
   radial-gradient(36% 28% at 100% 100%,color-mix(in srgb,var(--teal-vivo) 42%,transparent),color-mix(in srgb,var(--luz-mesh) 22%,transparent) 55%,transparent 100%);
  --veu-claro:radial-gradient(120% 70% at 18% 0%,var(--b55),transparent 60%),linear-gradient(var(--p46),var(--p46));
  --borda-ouro:linear-gradient(135deg,color-mix(in srgb,var(--branco) 95%,transparent),color-mix(in srgb,var(--teal-vivo) 45%,transparent) 22%,color-mix(in srgb,var(--amarelo) 75%,transparent) 48%,color-mix(in srgb,var(--ouro) 85%,transparent) 76%,color-mix(in srgb,var(--amarelo) 85%,transparent));
}
.estr-papel,.estr-nevoa{background:var(--mesh-portal),var(--mat-papel)}
/* véu do card por superfície: claro = véu do portal; escuro = véu do vidro B do DS (claro sobre escuro reprova o texto branco) */
[data-modo="claro"],.estr-papel,.estr-nevoa,.estr-sinal{--veu-card:var(--veu-claro)}
.estr-mesh,.estr-profundo,.estr-noite{--veu-card:var(--vidro-veu)}
/* shortcut: sem a camada --vidro-grao do portal; no claro ela é transparente e no escuro aponta para grao-160.png, que não está em assets/ */
.jc-elevado,.degrau{position:relative;background:var(--veu-card);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);box-shadow:var(--vidro-labios),var(--sombra-1)}
.jc-faixa-topo{background:var(--acento-quente) top/100% 8px no-repeat,var(--veu-card);box-shadow:var(--vidro-labios),var(--sombra-1)}
.jc-elevado::before,.degrau::before,.jc-nav__pilula::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)}
@media (prefers-reduced-transparency:reduce){.jc-elevado,.degrau{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--vidro-solido)}}
/* rótulo em teal-vivo sobre o canto amarelo do mesh mede 3,06 (390 px): no claro com mesh ele sobe para profundo */
.estr-papel .jc-rotulo,.estr-nevoa .jc-rotulo{color:var(--titulo)}
/* D2: o texto branco sobre as duas luzes do mesh (20 % 14 % e 82 % 30 %) media 4,38 a 4,44. Composição, sem mexer no token:
   um escurecimento teal-noite, só sobre essas duas luzes, por cima do mesh da seção. */
.jc-secao.estr-mesh{background:
  radial-gradient(62% 52% at 20% 14%,color-mix(in srgb,var(--teal-noite) 34%,transparent),color-mix(in srgb,var(--teal-noite) 14%,transparent) 55%,transparent 82%),
  radial-gradient(42% 36% at 82% 30%,color-mix(in srgb,var(--teal-noite) 24%,transparent),transparent 80%),
  var(--mat-mesh-vivo)}
/* amarelo mais presente (portal: .cab::before) */
.sec-cab::before{content:"";display:block;width:84px;height:9px;border-radius:99px;background:var(--acento-quente);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ouro) 60%,transparent)}

/* ── nav: vidro claro do portal, letreiro noite (herda o claro do html) ── */
/* véu .72 da variante forte do portal (portal-v5.forte.css): com o .46 o link mede 2,98 quando a nav passa sobre Noite; com .72, 5,81 */
.jc-nav__pilula{background:radial-gradient(120% 70% at 18% 0%,var(--b55),transparent 60%),linear-gradient(var(--p72),var(--p72));-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);box-shadow:var(--vidro-labios),var(--sombra-2)}
.jc-nav__acao{display:none}
@media (min-width:961px){.jc-nav__acao{display:inline-flex;margin-left:var(--e-1)}}

/* ── botão fixo no celular: sticky, sem JS ── */
.fixo{position:sticky;top:calc(100dvh - 16px - env(safe-area-inset-bottom,0px));height:0;z-index:30}
.botao-fixo{position:absolute;right:16px;bottom:0;max-width:calc(100% - 32px);white-space:normal;text-align:left}
@media (min-width:961px){.fixo{display:none}}
/* D4, D11: o botão fixo e a marca flutuam sobre claro, mesh e noite, e um anel de uma cor só não passa nos três.
   Anel duplo: teal-noite por fora (3:1 sobre claro e sobre o mesh azul) e branco por dentro (3:1 sobre noite). */
.jc-nav__marca:focus-visible,.jc-pular:focus-visible{outline:3px solid var(--teal-noite);outline-offset:2px;box-shadow:0 0 0 2px var(--branco)}
/* botão fixo: teal-noite colado ao botão (contra o fundo branco dele) e branco por fora (contra o mesh azul e a noite); sobre claro, o teal-noite já basta */
.botao-fixo:focus-visible{outline:3px solid var(--branco);outline-offset:3px;box-shadow:0 0 0 3px var(--teal-noite)}
.jc-pular:focus-visible{box-shadow:0 0 0 2px var(--titulo),0 0 0 4px var(--branco)}


/* ── avatares do panteão: só no cartão do chat (js/chat.js) ── */
.agente{margin:0;display:grid;gap:var(--e-2);align-content:start}
.agente__img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 6%;border-radius:var(--raio-g-j);box-shadow:var(--vidro-labios),var(--sombra-1)}
/* peso 400 de propósito: o 600 do Mulish (33 KB) só carrega se algum texto renderizado o usar, e o Atlas do #controle sempre renderiza */
.agente figcaption{font:400 16px/1.35 var(--f-texto);color:var(--corpo)}
.agente--cartao{padding:8px;border-radius:var(--raio-painel-j);box-shadow:var(--vidro-labios),var(--sombra-1)}
.agente--cartao figcaption{padding:0 4px 4px}
/* desempenho: o palco só entra no layout (e as três imagens só são pedidas) perto da rolagem; a altura reservada evita salto */

/* ── rodapé ── */
.rodape{border-top:1px solid var(--fio-forte);padding:var(--e-6) 0 calc(var(--e-6) + env(safe-area-inset-bottom,0px))}
.rodape__grade{display:grid;gap:var(--e-4)}
.rodape .jc-logo{height:36px}
.rodape ul{display:grid;gap:var(--e-1);margin:0;padding:0;list-style:none}
.rodape li{color:var(--corpo)}
.rodape li a{display:inline-flex;align-items:center;min-height:44px;color:var(--acento-texto);font-weight:800}
@media (min-width:900px){.rodape__grade{grid-template-columns:auto 1fr;gap:var(--e-7);align-items:start}}

/* ── páginas internas ── */
.pagina{padding:clamp(112px,14vh,140px) 0 var(--e-7)}
.pagina h1{margin-bottom:var(--e-5)}
.pagina h2{margin:var(--e-5) 0 var(--e-2);font:800 var(--t-h3)/1.15 var(--f-texto);color:var(--titulo)}
.pagina p{margin:0 0 var(--e-2)}
.pagina a{color:var(--acento-texto);font-weight:800}

/* ── chat-formulário (js/chat.js) · vidro do portal; sem JS fica fechado e o CTA leva a #comecar ── */
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.comecar{display:grid;gap:var(--e-1);margin-top:var(--e-3)}
.comecar a,.jc-link{color:var(--acento-texto);font-weight:800}
html.chat-aberto{overflow:hidden}
.chat{padding:0;border:0;background:none;color:var(--corpo);width:min(560px,100% - 32px);max-width:none;height:min(760px,var(--vv,100dvh) - 48px);max-height:none;overflow:visible}
/* véu sólido, sem blur: o blur da página inteira custava ~100 ms para abrir com CPU 4x */
.chat::backdrop{background:color-mix(in srgb,var(--teal-noite) 80%,transparent)}
/* véu .9: o painel passa sobre o fundo escurecido; com o .46 do portal o texto secundário reprovava */
.chat__painel{position:relative;isolation:isolate;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;height:100%;border-radius:var(--raio-painel-j);overflow:hidden;
  background:radial-gradient(120% 70% at 18% 0%,var(--b55),transparent 60%),linear-gradient(var(--p90),var(--p90)),var(--mesh-portal),var(--mat-papel);
  box-shadow:var(--vidro-labios),var(--sombra-2)}   /* o fundo já é opaco (mat-papel): o backdrop-filter não mudava nada e custava a abertura */
.chat__painel::before{content:"";position:absolute;inset:0;z-index:2;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)}
@media (max-width:599px){
  .chat{width:100%;height:var(--vv,100dvh);margin:0;inset:0 auto auto 0}
  .chat__painel{border-radius:0;padding-bottom:env(safe-area-inset-bottom,0px)}
}
.chat__topo{display:flex;align-items:center;gap:12px;padding:16px 16px 12px 20px}
.chat__avatar,.chat__mini{flex:none;display:block;border-radius:50%;background:var(--teal-profundo) var(--simbolo-capa) center/58% no-repeat;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ouro) 60%,transparent)}
.chat__avatar{width:44px;height:44px}
.chat__mini{width:30px;height:30px;align-self:flex-end}
.chat__quem{min-width:0}
.chat__nome{margin:0;font:900 20px/1.1 var(--f-titulo);color:var(--titulo)}
.chat__papel{margin:2px 0 0;font:600 14px/1.3 var(--f-texto);color:var(--secundario)}
.chat__fechar{margin-left:auto;min-height:44px;padding:0 16px;border:0;border-radius:var(--raio-pilula);background:transparent;box-shadow:inset 0 0 0 1px var(--fio-informa);color:var(--titulo);font:800 14px/1 var(--f-texto);cursor:pointer}
@media (hover:hover) and (pointer:fine){.chat__fechar:hover{background:var(--nav-hover)}}
.chat__progresso{height:4px;margin:0 20px;border-radius:99px;background:var(--trilha-vazio);overflow:hidden}
.chat__progresso i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--teal-vivo);transition:transform .2s ease-out}
.chat__lista{list-style:none;margin:0;padding:16px 16px 8px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain}
.chat__msg{display:flex;align-items:flex-end;gap:8px;max-width:88%}
.chat__bolha{margin:0;padding:12px 16px;font:400 16px/1.45 var(--f-texto);overflow-wrap:anywhere}
.chat__msg--site .chat__bolha{background:var(--elevado);color:var(--corpo);border-radius:18px 18px 18px 4px;box-shadow:inset 0 0 0 1px var(--elevado-fio),var(--sombra-1)}
.chat__msg--voce{align-self:flex-end;flex-direction:column;align-items:flex-end;gap:4px}
.chat__msg--voce .chat__bolha{background:var(--teal-vivo);color:var(--branco);border-radius:18px 18px 4px 18px;font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .chat__msg:last-child{animation:chat-entra .2s ease-out both}
  .chat__form--treme{animation:chat-treme .3s ease}
}
@keyframes chat-entra{from{opacity:0;transform:translateY(8px)}}
@keyframes chat-treme{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.chat__mudar,.chat__link{min-height:44px;min-width:44px;padding:0 8px;border:0;background:none;color:var(--acento-texto);font:800 14px/1 var(--f-texto);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.chat__entrada{padding:8px 16px 12px;display:grid;gap:8px}
.chat__entrada:empty{display:none}
.chat__form{display:grid;gap:8px}
.chat__linha{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-radius:var(--raio-pilula);background:var(--b62);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ouro) 60%,transparent),inset 0 1px 0 color-mix(in srgb,var(--branco) 85%,transparent)}
.chat__linha--multi{align-items:flex-end;border-radius:22px}
/* o campo não desenha o contorno próprio: o anel é o da pílula (:focus-within) */
.chat__linha :focus-visible{outline:none}
.chat__linha:focus-within{box-shadow:inset 0 0 0 2px var(--teal-vivo),0 0 0 4px color-mix(in srgb,var(--amarelo) 60%,transparent)}
.chat__ddi{font:800 18px/1 var(--f-texto);color:var(--titulo)}
.chat__campo{flex:1;min-width:0;min-height:48px;padding:0;border:0;background:transparent;color:var(--corpo);font:600 18px/1.4 var(--f-texto);outline:none}
textarea.chat__campo{padding:12px 0;resize:none}
.chat__campo::placeholder{color:var(--secundario);opacity:1}
.chat__select{cursor:pointer}
.chat__outro{min-height:52px;padding:0 16px;border-radius:var(--raio-pilula);background:var(--b62);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ouro) 60%,transparent)}
.chat__outro[hidden]{display:none}
.chat__enviar{flex:none;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--botao-disco);color:var(--botao-disco-tinta);font-size:20px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--check-anel)}
.chat__enviar .jc-icone{--icone:var(--botao-disco-tinta)}
.chat__ajuda,.chat__consent,.chat__conta,.chat__sugestao{margin:0;font:400 14px/1.45 var(--f-texto);color:var(--secundario)}
.chat__sugestao:empty,.chat__conta:empty,.chat__erro:empty{display:none}
.chat__erro{margin:0;font:800 14px/1.4 var(--f-texto);color:var(--erro)}
.chat__opcoes{display:flex;flex-wrap:wrap;gap:8px}
.chat__opcao{min-height:44px;padding:0 18px;border:0;border-radius:var(--raio-pilula);background:var(--b55);box-shadow:inset 0 0 0 1px var(--fio-informa);color:var(--titulo);font:800 15px/1 var(--f-texto);cursor:pointer}
@media (hover:hover) and (pointer:fine){.chat__opcao:hover:not(:disabled){background:var(--nav-hover)}}
.chat__opcao[aria-pressed="true"]{background:var(--acento-quente);color:var(--tinta-sobre-area);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ouro) 70%,transparent)}
.chat__opcao:disabled{opacity:.45;cursor:default}
.chat__pular{justify-self:start}
.chat__privacidade{margin:0;padding:10px 20px 14px;border-top:1px solid var(--fio);font:400 13px/1.45 var(--f-texto);color:var(--secundario)}
/* folga para o anel de foco do botão não ser cortado pela rolagem */
.chat__fim{display:grid;gap:12px;max-height:46vh;overflow-y:auto;padding:6px 10px 6px 6px;margin:-6px -6px -6px -6px}
.chat__resumo-titulo{margin:0;font:900 20px/1.2 var(--f-titulo);color:var(--titulo)}
.chat__resumo-lista{display:grid;margin:0}
.chat__resumo-item{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:4px 12px;padding:8px 0;border-bottom:1px solid var(--fio)}
.chat__resumo-item dt{font:800 14px/1.4 var(--f-texto);color:var(--secundario)}
.chat__resumo-item dd{margin:0;display:flex;justify-content:space-between;gap:8px;font:600 15px/1.4 var(--f-texto);color:var(--corpo);overflow-wrap:anywhere}
.chat__previa summary{cursor:pointer;font:800 14px/1.4 var(--f-texto);color:var(--acento-texto)}
.chat__previa pre{margin:8px 0 0;padding:12px 14px;border-radius:var(--raio-g-j);background:var(--b62);box-shadow:inset 0 0 0 1px var(--elevado-fio);font:400 14px/1.5 var(--f-texto);color:var(--corpo);white-space:pre-wrap;overflow-wrap:anywhere}
.chat__whats{justify-self:start}
.chat__email{margin:0;font:400 14px/1.45 var(--f-texto);color:var(--secundario)}
@media (prefers-reduced-transparency:reduce){.chat__painel{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--vidro-solido)}}
.chat__resumo-item dd span{flex:1;min-width:0}
.chat__resumo-item dd .chat__link{flex:none;white-space:nowrap;align-self:flex-start}
.chat__email .chat__link{padding:0;min-height:0}
.chat__isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chat__privacidade a{color:var(--acento-texto);font-weight:800}
.chat__mais{font:800 18px/1 var(--f-texto);color:var(--titulo)}
.chat__ddi{width:3ch;flex:none;min-height:48px;padding:0;border:0;border-right:1px solid var(--fio-forte);background:transparent;color:var(--titulo);font:800 18px/1 var(--f-texto);outline:none}
.chat__msg--voce .chat__mudar{margin:-10px -8px -10px 0}
/* cartão das quatro lentes (js/chat.js, diagnosticar): vidro claro dentro do log, Atena num cartão Profundo */
.chat__cartao{display:grid;gap:12px;align-self:stretch;padding:16px;border-radius:var(--raio-g-j);background:var(--b62);box-shadow:inset 0 0 0 1px var(--elevado-fio),var(--sombra-1)}
.chat__cartao p{margin:0}
.chat__dx-comeca{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:var(--raio-g-j);box-shadow:inset 0 0 0 1px var(--fio-informa)}
.chat__atena{flex:none;width:76px;padding:4px;border-radius:12px}
.chat__atena .agente__img{border-radius:8px}
.chat__dx-rotulo{font:800 14px/1.4 var(--f-texto);color:var(--secundario)}
.chat__dx-texto{font:400 16px/1.45 var(--f-texto);color:var(--corpo);overflow-wrap:anywhere}
.chat__dx-limite{font:800 15px/1.4 var(--f-texto);color:var(--titulo);overflow-wrap:anywhere}
.chat__dx-lente{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--fio)}
.chat__dx-lente-titulo{margin:0;font:800 16px/1.3 var(--f-texto);color:var(--titulo)}
.chat__dx-muda{display:flex;flex-wrap:wrap;gap:0 8px}


/* ── rodada 3: o que ainda vale (botão, chat) ── */
:root{--grao:url('../assets/texturas/grao-220.webp')}   /* webp do mesmo grão: 47 KB contra 67 KB */
/* motion 2: sem a varrida do botão */
.jc-botao::after{display:none}
/* motion 9: .jc-detalhe em 200 ms */
/* chat: avatar só no primeiro balão de cada grupo */
.chat__msg--site + .chat__msg--site .chat__mini{visibility:hidden}
/* motion 7: travamento com transição curta */
.chat__opcao{transition:opacity .2s ease,background-color .2s ease}
/* motion 10: diálogo entra em 200 ms com o fundo; fechar é instantâneo */
@media (prefers-reduced-motion:no-preference){
  .chat[open]{animation:chat-abre .2s ease-out}
  .chat[open]::backdrop{animation:chat-fundo .2s ease-out}
}
@keyframes chat-abre{from{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes chat-fundo{from{opacity:0}}

.chat__avatar,.chat__mini{background:var(--teal-profundo) url('../assets/apolo/apolo-notebook-avatar-96.webp') center/cover no-repeat}

/* cartão das quatro lentes no chat */
@media (prefers-reduced-motion:no-preference){
  .chat__cartao--anima .chat__dx-lente{animation:chat-entra 200ms var(--m-entra) 80ms both}
  .chat__cartao--anima .chat__dx-lente:nth-child(5){animation-delay:190ms}
  .chat__cartao--anima .chat__dx-lente:nth-child(6){animation-delay:300ms}
  .chat__cartao--anima .chat__dx-lente:nth-child(7){animation-delay:410ms}
}

@media (prefers-reduced-motion:reduce){.chat *{transition:none!important}}

/* ════ v6 (02/11/2026): menu do celular, manifesto, rodapé em colunas e revelação de blocos ════
   Menu com CTA, rodapé marca + colunas + linha de base; cor, fonte e motion do DS v5. */
.jc-nav__menu{display:none}
.jc-nav__links-acao{display:none}
@media (max-width:960px){
  .js .jc-nav__menu{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;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-nav__menu:focus-visible{outline:3px solid var(--teal-noite);outline-offset:2px;box-shadow:0 0 0 2px var(--branco)}
  /* ícone: 2 traços na mesma caixa, girando no próprio centro. Abrir: os traços se juntam no meio e depois giram ±45° (X simétrico).
     Fechar: desgiram e depois se separam. translate e rotate separados: cada fase tem o seu tempo, sem forma torta no meio */
  .jc-nav__traco{display:block;position:relative;width:18px;height:14px}
  .jc-nav__traco::before,.jc-nav__traco::after{content:"";position:absolute;left:0;top:6px;width:18px;height:2px;border-radius:2px;background:currentColor;
    rotate:0deg;transition:rotate 90ms ease-out,translate 90ms ease-out 70ms}
  .jc-nav__traco::before{translate:0 -4px}
  .jc-nav__traco::after{translate:0 4px}
  .jc-nav__menu[aria-expanded="true"] .jc-nav__traco::before,.jc-nav__menu[aria-expanded="true"] .jc-nav__traco::after{translate:0 0;transition:translate 90ms var(--m-entra),rotate 130ms var(--m-entra) 70ms}
  .jc-nav__menu[aria-expanded="true"] .jc-nav__traco::before{rotate:45deg}
  .jc-nav__menu[aria-expanded="true"] .jc-nav__traco::after{rotate:-45deg}
  /* vidro dentro de vidro não desfoca (a pílula com backdrop-filter vira a raiz do fundo do card): o desfoque da pílula passa para o ::after */
  .jc-nav .jc-nav__pilula{-webkit-backdrop-filter:none;backdrop-filter:none}
  .jc-nav .jc-nav__pilula::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%)}
  /* véu da tela com o menu aberto: apaga o conteúdo que aparece nas frestas em volta da nav e do card */
  .js .jc-nav::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgb(13 37 51 / .32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    visibility:hidden;opacity:0;transition:opacity 140ms ease-out,visibility 0s linear 140ms}
  .js .jc-nav[data-aberto]::before{visibility:visible;opacity:1;transition:opacity var(--m-curto) ease-out}
  /* painel: vidro B (receita do chat, v63 §6), sempre montado, escondido com visibility (sai da ordem de foco) para poder animar.
     Abre em 200 ms (aparece e desce 6 px); fecha em 140 ms. O desfoque não anima. */
  .js .jc-nav__links{display:grid;position:absolute;top:calc(100% + 8px);left:0;right:0;gap:2px;margin:0;padding:8px;border-radius:var(--raio-g);
    background:linear-gradient(118deg,rgb(255 255 255 / .12) 0%,rgb(255 255 255 / .03) 24%,rgb(255 255 255 / 0) 40%),radial-gradient(70% 40% at 100% 0%,rgb(62 155 211 / .2),transparent 70%),
      url('../assets/texturas/grao-160.png'),linear-gradient(160deg,rgb(14 61 89 / .64),rgb(13 37 51 / .78));
    -webkit-backdrop-filter:blur(16px) saturate(150%) brightness(.55);backdrop-filter:blur(16px) saturate(150%) brightness(.55);
    box-shadow:inset 0 1.5px 0 rgb(255 255 255 / .4),inset 0 -1.5px 0 rgb(240 208 122 / .35),inset 0 0 0 1px rgb(255 255 255 / .14),inset 0 26px 34px -26px rgb(255 255 255 / .16),
      0 2px 6px rgb(6 30 46 / .25),0 24px 50px -24px rgb(6 30 46 / .7);
    visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity 140ms ease-out,transform 140ms ease-out,visibility 0s linear 140ms}
  .js .jc-nav[data-aberto] .jc-nav__links{visibility:visible;opacity:1;transform:none;transition:opacity var(--m-curto) var(--m-entra),transform var(--m-curto) var(--m-entra)}
  .jc-nav__links a{min-height:48px;padding:0 16px;font-size:17px;color:var(--nav-link-ativo)}   /* branco: AA no pior ponto do vidro (scripts/contraste.py) */
  .jc-nav__links-acao{display:block;padding:8px 0 0}
  .jc-nav__links-acao .jc-botao{width:100%;justify-content:space-between}
  .jc-nav__links-acao .jc-botao span{margin:0;font:inherit;letter-spacing:normal}
  /* o CTA do painel herdaria a cor e o hover dos links da nav (#CFE3EA no modo escuro, sobre o amarelo): volta às cores do botão */
  .jc-nav__links a.jc-botao,.jc-nav__links a.jc-botao:hover{padding:0 var(--botao-recuo) 0 28px;background:var(--botao-fundo);color:var(--botao-tinta);font:800 17px/1.1 var(--f-texto)}
  .jc-nav__links a.jc-botao span{color:var(--botao-tinta)}
  .jc-nav__links a.jc-botao .jc-botao__seta{color:var(--botao-disco-tinta)}
}
@media (max-width:960px){
  /* sem backdrop-filter: véu quase sólido em vez de vidro ralo */
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.js .jc-nav__links{background:rgb(14 51 74 / .97)}}
  @media (prefers-reduced-transparency:reduce){
    .jc-nav .jc-nav__pilula::after{display:none}
    .js .jc-nav::before{-webkit-backdrop-filter:none;backdrop-filter:none}
    .js .jc-nav__links{background:var(--vidro-solido);-webkit-backdrop-filter:none;backdrop-filter:none}}
  @media (prefers-contrast:more){
    .jc-nav .jc-nav__pilula::after{display:none}
    .js .jc-nav::before{-webkit-backdrop-filter:none;backdrop-filter:none}
    .js .jc-nav__links{background:var(--teal-noite);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 2px var(--ouro-claro)}}
  /* movimento reduzido: o card e o véu só aparecem (sem descer); o ícone troca sem girar */
  @media (prefers-reduced-motion:reduce){
    .js .jc-nav__links,.js .jc-nav[data-aberto] .jc-nav__links{transform:none}
    .jc-nav__menu .jc-nav__traco::before,.jc-nav__menu .jc-nav__traco::after,
    .jc-nav__menu[aria-expanded] .jc-nav__traco::before,.jc-nav__menu[aria-expanded] .jc-nav__traco::after{transition:none}}
}
@media (hover:hover){.jc-nav__menu:hover{background:var(--fio-forte)}}
.jc-nav__links a:focus-visible{outline:3px solid var(--teal-noite);outline-offset:2px;box-shadow:0 0 0 2px var(--branco)}

/* manifesto: um bloco escuro, sóbrio; a assinatura é a única linha em amarelo */
.manifesto__grade{display:grid;gap:var(--e-5)}
.manifesto .q-h2{max-width:14ch}
.manifesto__texto{display:grid;gap:20px}
.manifesto__texto .q-lead{margin:0}
.manifesto .q-corpo{color:var(--corpo)}
.manifesto__assina{margin:12px 0 0;font:900 clamp(26px,2.6vw,36px)/1.1 var(--f-titulo);letter-spacing:-.02em;color:var(--amarelo)}
@media (min-width:900px){.manifesto__grade{grid-template-columns:1fr 1fr;gap:var(--e-7);align-items:start}}

/* rodapé: marca + texto curto + CTA, duas colunas de links, linha de base */
.rodape__marca{display:grid;gap:var(--e-3);justify-items:start;max-width:40ch}
.rodape__marca p{margin:0;color:var(--corpo)}
.rodape__col h2{margin:0 0 var(--e-1);font:800 13px/1.2 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--titulo)}
.rodape__col a{font-weight:600;text-decoration:none;transition:color var(--m-curto) ease}
@media (hover:hover){.rodape__col a:hover{text-decoration:underline;text-underline-offset:4px}}
.rodape a:focus-visible{outline:3px solid var(--branco);outline-offset:2px}
.rodape__base{margin:var(--e-6) 0 0;padding-top:var(--e-3);border-top:1px solid var(--fio-forte);font-size:14px;color:var(--corpo)}
@media (min-width:900px){.rodape__grade{grid-template-columns:2fr 1fr 1fr}}

/* fluidez: entrada de bloco uma vez (DS v5: y 32px, --m-narra, só transform e opacity). Sem JS ou com movimento reduzido, tudo já aparece.
   Sem scroll-behavior:smooth: com o content-visibility das seções (partes.css), a rolagem suave para no lugar errado */
@media (prefers-reduced-motion:no-preference){
  .revela{opacity:0;transform:translateY(32px)}
  .revela.visto{opacity:1;transform:none;transition:opacity var(--m-narra) var(--m-entra),transform var(--m-narra) var(--m-entra)}
}
#fecho{contain-intrinsic-size:auto 1500px}
.rodape__marca .rodape__manifesto{font:900 20px/1.2 var(--f-titulo);color:var(--amarelo)}

/* ── v6.1 (02/11) · nav fixa num só tom + rodapé em cartão no celular (referência de estrutura: rodapé da Horizon) ── */
.jc-nav[data-modo="escuro"] .jc-nav__pilula{background:var(--nav-veu-compacta);transition:width var(--m-medio) var(--m-entra)}
@media (max-width:899px){
  .rodape{padding:var(--e-4) 0 calc(var(--e-5) + env(safe-area-inset-bottom,0px))}
  .rodape__grade{gap:0;padding:var(--e-3);border-radius:24px;background:var(--vidro-leve);border:1px solid var(--vidro-leve-borda);box-shadow:0 20px 48px rgb(0 0 0 / .28)}
  .rodape__marca{gap:var(--e-2);padding-bottom:var(--e-3)}
  .rodape__col{padding:var(--e-3) 0;border-top:1px solid var(--fio-forte)}
  .rodape__col:last-child{padding-bottom:0}
  .rodape__col h2{margin-bottom:var(--e-1)}
  .rodape nav.rodape__col ul{grid-template-columns:1fr 1fr;column-gap:var(--e-2)}
  .rodape li a{min-height:40px}
  .rodape__col li:not(:has(a)){padding:6px 0}
  .rodape__base{margin-top:var(--e-3);padding-top:0;border-top:0;text-align:center;font-size:13px}
}

/* ── v6.2 (02/11) · logo com símbolo amarelo e nome branco no menu e no rodapé; botão do Instagram no rodapé ── */
.jc-nav .jc-logo,.rodape .jc-logo{--logo:url('../assets/logo/letreiro-ouro-branco.svg');background-image:var(--logo)}
.rodape .rodape__ig{gap:10px;padding:0 16px;min-height:44px;margin:6px 0;border-radius:var(--raio-pilula);border:1px solid var(--fio-forte);color:var(--titulo);background:rgb(255 255 255 / .06);transition:border-color var(--m-curto) ease,background-color var(--m-curto) ease,color var(--m-curto) ease}
.rodape .rodape__ig svg{color:var(--amarelo);flex:none}
@media (hover:hover){.rodape .rodape__ig:hover{border-color:var(--amarelo);background:rgb(255 229 86 / .10);text-decoration:none}}

/* ── v6.2 (02/11) · prova curta do topo, entregas e requisitos, critério com exemplo, preço e garantia em destaque ── */
.topo__prova{margin:0;font:700 15px/1.45 var(--f-texto);color:var(--titulo)}
@media (min-width:961px){.cf__pe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.recebe,.requisitos,.criterio{display:grid;gap:10px;align-content:start}
.recebe ul,.requisitos ul{margin:0;padding:0;list-style:none;display:grid}
.recebe li,.requisitos li{padding:10px 0;border-bottom:1px solid rgb(14 61 89 / .08);font:600 15px/1.45 var(--f-texto);color:var(--titulo)}
.recebe li b{font-weight:800}
.recebe .q-ilustr{justify-self:start}
.criterio{margin-top:36px;padding-top:24px;border-top:1px solid var(--p-fio)}
.criterio .q-corpo{margin:0}
.criterio__ex{margin:0;padding:14px 18px;border-left:3px solid var(--ouro);background:rgb(217 174 76 / .08);font:600 15px/1.5 var(--f-texto);color:var(--titulo);max-width:60ch}
.criterio__ex b{display:block;margin-bottom:4px;font:800 12px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-secundario)}
.preco__valor{margin:40px 0 0;font:900 clamp(30px,3.2vw,44px)/1.1 var(--f-titulo);letter-spacing:-.025em;color:var(--titulo);font-variant-numeric:tabular-nums}
.garantia{margin:16px 0 0;padding:16px 20px;border-radius:var(--raio-p);box-shadow:inset 0 0 0 2px var(--ouro);font:800 18px/1.4 var(--f-texto);color:var(--titulo);max-width:46ch}
.pr__cta{display:grid;gap:14px;justify-items:start;margin-top:72px;padding-top:40px;border-top:1px solid rgb(14 61 89 / .2)}
.pr__cta .q-corpo{margin:0;font-weight:800;color:var(--titulo)}
.chat__agenda{justify-self:start}
.chat__depois{margin:0;font:600 14px/1.45 var(--f-texto);color:var(--secundario)}
/* v6.2: o recibo agora tem cerca de metade da altura; as linhas do mês ficam mais juntas para o FGTS não sumir atrás dele */
.escala .holerite li{padding-top:7px;padding-bottom:7px}
@media (max-width:760px){.escala .holerite li{padding-top:6px;padding-bottom:6px}}
/* v6.2: no celular o preço vem depois do escopo e do aceite (a figura com o valor desce para o fim da seção) */
@media (max-width:960px){.pr>.escala{order:1}.pr>.pr__cta{order:2}}