/* John's Company · v6.3 (02/11/2026): botões, chat em vidro, "digitando", agenda no site, costuras entre seções e fallbacks do vidro.
   Carregado por último (index e privacidade): só sobrepõe; tirar este arquivo volta ao v6.2 (menos o JS do chat e as classes de seção).
   Fontes: DS v5 02-direcao §2.1 (vidro B e claro), §2.3 (botão), §2.4 (foco e sombra), §3.2 (ritmo); skills apple-design §12/§14 e emil-design-eng (toque .98, ease-out, só transform/opacity). */

/* ══ 1. Botão principal: amarelo com lábio especular, brilho interno e profundidade ══════════════
   O degradê da marca não muda (#FFE556 → #EBC54F → #D9AE4C, texto noite 12+). Muda o material:
   - lábio de luz em cima (inset branco 1 px) e borda de ouro embaixo, como o vidro;
   - reflexo especular na metade de cima (::after, sem animar);
   - sombra de contato curta + sombra de profundidade cor de ouro (nunca preta, DS §2.4);
   - seta num disco noite com a seta amarela: o "botão dentro do botão" que anda 3 px no hover. */
.jc-botao{
  --b-labio:inset 0 1px 0 rgb(255 255 255 / .85),inset 0 -1px 0 rgb(150 105 20 / .45),inset 0 0 0 1px rgb(185 140 40 / .35),inset 0 10px 18px -12px rgb(255 255 255 / .9);
  --b-contato:0 1px 2px rgb(110 75 10 / .28);
  box-shadow:var(--b-labio),var(--b-contato),var(--botao-sombra);
  transition:transform var(--m-curto) var(--m-entra),box-shadow var(--m-curto) var(--m-entra),filter var(--m-curto) ease;
  -webkit-tap-highlight-color:transparent;font-weight:800}
.jc-botao::after{display:block;content:"";position:absolute;inset:1px 1px 50%;z-index:0;border-radius:inherit;border-bottom-left-radius:40% 30%;border-bottom-right-radius:40% 30%;
  background:linear-gradient(180deg,rgb(255 255 255 / .5),rgb(255 255 255 / .08));transform:none;transition:opacity var(--m-curto) ease;pointer-events:none;opacity:.7}
.jc-botao>*{position:relative;z-index:1}
.jc-botao__seta{background:var(--teal-noite);color:var(--amarelo);box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 1px 2px rgb(13 37 51 / .35);
  transition:transform var(--m-curto) var(--m-entra)}
.jc-botao__seta .jc-icone{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
  .jc-botao:hover{transform:translateY(-1px);box-shadow:var(--b-labio),var(--b-contato),var(--botao-sombra-hover);filter:saturate(1.06) brightness(1.02)}
  .jc-botao:hover::after{opacity:1;transform:none}
  .jc-botao:hover .jc-botao__seta{transform:translateX(3px)}
}
/* toque: resposta no aperto (apple-design §1), 120 ms; o lábio inverte como um botão afundando */
.jc-botao:active{transform:scale(.98);transition-duration:var(--m-toque);
  box-shadow:inset 0 2px 4px rgb(120 80 10 / .3),inset 0 -1px 0 rgb(255 255 255 / .4),inset 0 0 0 1px rgb(185 140 40 / .45),var(--b-contato)}
.jc-botao:active::after{opacity:.35}
.jc-botao:active .jc-botao__seta{transform:translateX(1px)}
/* foco: anel do modo (claro teal-vivo, escuro amarelo) + folga branca/noite para ler sobre mesh e sobre o próprio amarelo */
.jc-botao:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
[data-modo="claro"] .jc-botao:focus-visible{box-shadow:var(--b-labio),0 0 0 3px var(--branco)}
[data-modo="escuro"] .jc-botao:focus-visible{box-shadow:var(--b-labio),var(--botao-sombra)}
.jc-botao:disabled,.jc-botao[aria-disabled="true"]{box-shadow:inset 0 0 0 1px var(--fio-forte);filter: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;box-shadow:none;color:inherit}
/* o painel do menu no celular repinta o fundo do CTA; o reflexo e o disco valem lá também */
.jc-nav__links a.jc-botao .jc-botao__seta{color:var(--amarelo)}

/* ══ 2. Botão secundário em vidro (.jc-botao--vidro) ═════════════════════════════════════════════
   Claro: vidro fosco do DS (branco .55 + blur 16, lábio branco, fio informativo teal-vivo para o contorno 3:1).
   Escuro: vidro B leve (branco .08), lábio branco em cima, fio apoio-claro .45. Sem brilho (o brilho é do primário). */
.jc-botao--vidro{
  --botao-fundo:radial-gradient(120% 90% at 20% 0%,rgb(255 255 255 / .7),transparent 60%),rgb(255 255 255 / .5);
  --botao-tinta:var(--titulo);
  --b-labio:inset 0 1px 0 rgb(255 255 255 / .95),inset 0 0 0 1px var(--fio-informa);
  --b-contato:0 1px 2px rgb(14 61 89 / .10);
  --botao-sombra:0 10px 24px -14px rgb(14 61 89 / .35);
  --botao-sombra-hover:0 16px 32px -16px rgb(14 61 89 / .45);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
[data-modo="escuro"] .jc-botao--vidro,.jc-botao--vidro[data-modo="escuro"]{
  --botao-fundo:radial-gradient(120% 90% at 20% 0%,rgb(255 255 255 / .16),transparent 60%),rgb(255 255 255 / .07);
  --botao-tinta:var(--branco);
  --b-labio:inset 0 1px 0 rgb(255 255 255 / .35),inset 0 0 0 1px rgb(207 227 234 / .45);
  --b-contato:0 1px 2px rgb(6 30 46 / .4);
  --botao-sombra:0 12px 28px -16px rgb(6 30 46 / .7);
  --botao-sombra-hover:0 16px 36px -16px rgb(6 30 46 / .8)}
.jc-botao--vidro::after{opacity:.45}
.jc-botao--vidro .jc-botao__seta{background:transparent;box-shadow:inset 0 0 0 1px currentColor;color:inherit}
@media (hover:hover) and (pointer:fine){.jc-botao--vidro:hover{filter:none}}
.jc-botao--vidro:active{box-shadow:var(--b-labio),inset 0 2px 6px rgb(6 30 46 / .18)}

/* ══ 3. Topo: a grade do painel (defeito do v6.2 no desktop) ═══════════════════════════════════
   O v6.2 pôs a .topo__prova na coluna "auto" da grade: no desktop ela empurrava o lead para uma palavra por linha.
   O lead ocupa a linha toda; embaixo, a prova (coluna 1) e o botão (coluna 2) lado a lado. */
@media (min-width:761px){
  .topo__acao .jc-lead{grid-column:1 / -1;max-width:60ch}
  .topo__acao .topo__prova{grid-column:1;align-self:center}
  .topo__acao>.jc-botao{grid-column:2;grid-row:2;align-self:center}
}

/* ══ 4. Alternância e costuras entre seções (DS §3.2) ═══════════════════════════════════════════
   Antes: claro · papel · papel · claro · papel · papel · claro · noite · noite (duas duplas vizinhas lidas como uma só, cortes secos).
   Depois: claro · papel · claro · papel · claro · papel · claro · noite (folha que sobe) · preto-marca (assinatura).
   A troca de classe fica no index.html; aqui, a costura: 160 px no topo da seção que fundem a cor de base da anterior. */
.q-sec{isolation:isolate}
.q-sec::before{content:"";position:absolute;inset:0 0 auto;height:min(160px,30%);z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--costura,transparent),transparent)}
.q-papel+.q-claro{--costura:#EDE8DF}
.q-claro+.q-papel{--costura:#F2F5F7}
.fixo+.q-sec{--costura:#F2F5F7}   /* 1ª seção, depois do topo: o topo termina em #F2F5F7 (abaixo) */
/* topo (mesh quente) → 1ª seção clara: a base do topo funde no claro, e as luzes dos cantos somem antes do corte */
.topo{isolation:isolate}
.topo::after{content:"";position:absolute;inset:auto 0 0;height:180px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgb(242 245 247 / 0),#F2F5F7)}
/* claro → manifesto: o escuro chega como uma folha que sobe (raio do palco com canto do J), não como corte reto */
.manifesto{margin-top:-40px;overflow:clip;border-radius:32px 32px 0 0;box-shadow:0 -1px 0 rgb(217 174 76 / .45),0 -30px 60px -36px rgb(6 30 46 / .55)}
@media (max-width:760px){.manifesto{margin-top:-28px;border-radius:24px 24px 0 0}}
/* manifesto → rodapé: o rodapé é a assinatura (estrutura Ouro do DS: preto-marca) e abre com um fio de ouro que some nas pontas */
.rodape{background:radial-gradient(60% 80% at 85% 0%,rgb(28 103 148 / .22),transparent 70%),var(--preto-marca);border-top:0;position:relative}
.rodape::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgb(217 174 76 / .7) 30%,rgb(255 229 86 / .8) 50%,rgb(217 174 76 / .7) 70%,transparent)}
.rodape.estr-noite::after{opacity:.6}

/* ══ 5. Vidro geral: a mesma assinatura em todos (lábio branco em cima, ouro embaixo) e os fallbacks ══ */
/* nav: lábio de luz mais nítido em cima, como o vidro dos cards */
.jc-nav__pilula{box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 -1px 0 rgb(217 174 76 / .35),var(--sombra-2)}
/* sem backdrop-filter (navegador antigo, alguns Android): véu sólido em vez de vidro ralo */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .jc-nav .jc-nav__pilula{background:rgb(13 37 51 / .96)}
  .topo__acao.vidro,.q-palco.cenas,.q-palco.comparar,.q-palco.dg,.q-palco.fecho,.q-palco.fu-palco,.cf-mesa,.valores,.dg .cartao{background:rgb(14 61 89 / .97)}
  .ancora,.chip:not([aria-pressed="true"]),.selos li,.degrau-p.vidro,.jc-elevado,.degrau{background:var(--off-white-placa)}
  .jc-botao--vidro{--botao-fundo:var(--off-white-placa)}
  [data-modo="escuro"] .jc-botao--vidro{--botao-fundo:rgb(255 255 255 / .12)}
  .chat__painel{background:rgb(14 51 74 / .98)}
}
@media (prefers-reduced-transparency:reduce){
  .jc-nav .jc-nav__pilula{background:rgb(13 37 51 / .97);-webkit-backdrop-filter:none;backdrop-filter:none}
  .jc-botao--vidro{-webkit-backdrop-filter:none;backdrop-filter:none;--botao-fundo:var(--off-white-placa)}
  [data-modo="escuro"] .jc-botao--vidro{--botao-fundo:rgb(14 61 89 / .97)}
}
@media (prefers-contrast:more){
  .jc-nav .jc-nav__pilula{background:var(--teal-noite);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 2px var(--ouro-claro)}
  .jc-botao{box-shadow:inset 0 0 0 2px var(--teal-noite)}
  .jc-botao::after{display:none}
  .jc-botao--vidro{-webkit-backdrop-filter:none;backdrop-filter:none;--botao-fundo:var(--branco);box-shadow:inset 0 0 0 2px var(--teal-profundo)}
  [data-modo="escuro"] .jc-botao--vidro{--botao-fundo:var(--teal-noite);box-shadow:inset 0 0 0 2px var(--apoio-claro)}
}

/* ══ 6. Chat-formulário em vidro escuro (receita B do DS) ════════════════════════════════════════
   "Chats usam palco escuro local" (receita-visual). O painel ganha data-modo="escuro" no index: os tokens viram os do escuro.
   O fundo da página (::backdrop) fica mais leve (.80 → .52) para o vidro ter o que desfocar; o véu do painel (.78 → .9)
   segura o contraste sobre qualquer trecho da página: medido com axe no fim das provas. */
.chat::backdrop{background:radial-gradient(80% 60% at 50% 40%,rgb(13 37 51 / .42),rgb(13 37 51 / .62))}
.chat__painel{color-scheme:dark;color:var(--corpo);
  background:
    linear-gradient(118deg,rgb(255 255 255 / .10) 0%,rgb(255 255 255 / .03) 24%,rgb(255 255 255 / 0) 40%),
    radial-gradient(70% 40% at 100% 0%,rgb(62 155 211 / .22),transparent 70%),
    radial-gradient(60% 35% at 0% 100%,rgb(255 229 86 / .08),transparent 70%),
    url('../assets/texturas/grao-160.png'),
    linear-gradient(160deg,rgb(14 61 89 / .78),rgb(13 37 51 / .9));
  -webkit-backdrop-filter:blur(28px) saturate(160%) brightness(.6);backdrop-filter:blur(28px) saturate(160%) brightness(.6);
  box-shadow:inset 0 1.5px 0 rgb(255 255 255 / .42),inset 0 -1.5px 0 rgb(240 208 122 / .4),inset 0 0 0 1px rgb(255 255 255 / .08),inset 0 26px 34px -26px rgb(255 255 255 / .18),
    0 2px 6px rgb(6 30 46 / .3),0 40px 90px -30px rgb(6 30 46 / .8)}
@media (max-width:599px){.chat__painel{-webkit-backdrop-filter:blur(16px) saturate(150%) brightness(.6);backdrop-filter:blur(16px) saturate(150%) brightness(.6)}}
/* materializar (apple-design §12): entra com escala e opacidade; o desfoque do fundo não anima */
@media (prefers-reduced-motion:no-preference){.chat[open]{animation:chat-abre 260ms var(--m-entra)}}
.chat__topo{border-bottom:1px solid var(--fio)}
.chat__papel{color:var(--secundario)}
.chat__progresso{margin-top:10px}
.chat__progresso i{background:linear-gradient(90deg,var(--ouro),var(--amarelo))}
/* bolhas: a do assistente é vidro (lábio em cima); a sua é névoa clara com tinta profunda (8,6) */
.chat__msg--site .chat__bolha{background:linear-gradient(180deg,rgb(255 255 255 / .09),rgb(255 255 255 / .05));color:var(--corpo);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .16),inset 0 0 0 1px rgb(207 227 234 / .12)}
.chat__msg--voce .chat__bolha{background:var(--apoio-claro);color:var(--teal-profundo);box-shadow:inset 0 1px 0 rgb(255 255 255 / .7),0 6px 16px -10px rgb(6 30 46 / .6)}
.chat__mini,.chat__avatar{box-shadow:inset 0 0 0 1px rgb(217 174 76 / .6),0 2px 6px rgb(6 30 46 / .4)}
/* campos e opções: vidro claro sobre o vidro escuro seria "claro sobre claro" (apple §12); ficam véus finos de branco */
.chat__linha,.chat__outro{background:rgb(255 255 255 / .07);box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),inset 0 0 0 1px rgb(207 227 234 / .38)}
.chat__linha:focus-within{box-shadow:inset 0 0 0 2px var(--amarelo),0 0 0 4px rgb(255 229 86 / .18)}
.chat__outro:focus-visible{outline:2px solid var(--amarelo);outline-offset:2px}
.chat__campo,.chat__ddi,.chat__mais{color:var(--titulo)}
.chat__select option{background:var(--teal-noite);color:var(--branco)}
.chat__opcao{background:rgb(255 255 255 / .07);color:var(--titulo);box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),inset 0 0 0 1px rgb(207 227 234 / .45);
  transition:transform var(--m-toque) var(--m-entra),opacity .2s ease,background-color .2s ease}
@media (hover:hover) and (pointer:fine){.chat__opcao:hover:not(:disabled){background:rgb(255 255 255 / .14)}}
.chat__opcao:active:not(:disabled){transform:scale(.97)}
.chat__opcao[aria-pressed="true"]{background:linear-gradient(180deg,#FFE556 0%,#EBC54F 55%,#D9AE4C 100%);color:var(--teal-noite);box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),inset 0 0 0 1px rgb(185 140 40 / .5)}
.chat__opcao:focus-visible,.chat__mudar:focus-visible,.chat__link:focus-visible,.chat__fechar:focus-visible,.chat__previa summary:focus-visible{outline:2px solid var(--amarelo);outline-offset:2px}
/* enviar = o disco do botão principal (amarelo, seta noite) */
.chat__enviar{background:linear-gradient(180deg,#FFE556 0%,#EBC54F 55%,#D9AE4C 100%);color:var(--teal-noite);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),inset 0 -1px 0 rgb(150 105 20 / .45),0 4px 12px -4px rgb(255 214 80 / .45);transition:transform var(--m-toque) var(--m-entra)}
.chat__enviar .jc-icone{--icone:var(--teal-noite)}
.chat__enviar:active{transform:scale(.94)}
.chat__enviar:focus-visible{outline:2px solid var(--amarelo);outline-offset:3px}
.chat__cartao{background:linear-gradient(180deg,rgb(255 255 255 / .08),rgb(255 255 255 / .04));box-shadow:inset 0 1px 0 rgb(255 255 255 / .16),inset 0 0 0 1px rgb(207 227 234 / .14),0 18px 40px -24px rgb(6 30 46 / .7)}
.chat__dx-comeca{box-shadow:inset 0 0 0 1px rgb(217 174 76 / .45);background:rgb(217 174 76 / .06)}
.chat__previa pre{background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px var(--elevado-fio)}
.chat__privacidade{border-top-color:var(--fio)}
.chat__whats{justify-self:start}
.chat__fim .jc-botao{font-size:16px}
@media (max-width:480px){.chat__fim .jc-botao{width:100%;justify-content:space-between}}

/* "digitando": três pontos numa bolha do assistente. 1,2 s por ciclo, só opacity e transform; reduzido = pontos parados */
.chat__digitando .chat__bolha{display:flex;align-items:center;gap:5px;min-height:46px;padding:0 18px}
.chat__digitando i{display:block;width:7px;height:7px;border-radius:50%;background:var(--apoio-claro);opacity:.75}
@media (prefers-reduced-motion:no-preference){
  .chat__digitando i{animation:chat-ponto 1.2s var(--m-anda) infinite}
  .chat__digitando i:nth-child(2){animation-delay:.15s}
  .chat__digitando i:nth-child(3){animation-delay:.3s}
}
@keyframes chat-ponto{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* agenda dentro do chat: moldura de vidro com borda de ouro; a página do Google é branca, então o quadro é a "janela" */
.chat__agenda-moldura{position:relative;align-self:stretch;padding:6px;border-radius:20px 20px 20px 5px;
  background:linear-gradient(180deg,rgb(255 255 255 / .12),rgb(255 255 255 / .05));box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),0 20px 44px -24px rgb(6 30 46 / .8)}
.chat__agenda-moldura::before{content:"";position:absolute;inset:0;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)}
.chat__agenda-quadro{display:block;width:100%;height:min(620px,calc(var(--vv,100dvh) - 220px));border:0;border-radius:15px 15px 15px 3px;background:var(--branco)}
.chat__lista .chat__fim--agenda{max-height:none;overflow:visible;margin:4px 0 0;padding:0 2px;align-self:stretch}
.chat__aba{justify-self:start;padding:0}

/* fallbacks do chat */
@media (prefers-reduced-transparency:reduce){
  .chat__painel{background:rgb(14 51 74 / .98);-webkit-backdrop-filter:none;backdrop-filter:none}
  .chat::backdrop{background:rgb(13 37 51 / .85)}
}
@media (prefers-contrast:more){
  .chat__painel{background:var(--teal-noite);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 2px var(--ouro-claro)}
  .chat__linha,.chat__outro,.chat__opcao,.chat__msg--site .chat__bolha,.chat__cartao{background:var(--teal-noite);box-shadow:inset 0 0 0 2px var(--apoio-claro)}
}