/* Menu do topo (Figma Concept 2835:176448/176532 desktop, 2835:176623/176684/176712 mobile). HTML em scripts/menu.py, abrir/fechar no menu.js.
   Arquivo à parte (não <style> injetado): o blog em jota.ai/blog tem CSP default-src 'self', que bloqueia estilo inline. */
.jm-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin:0 10px 0 auto;border:0;border-radius:50%;background:#fefefd;cursor:pointer;padding:0;transition:height .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1);}
.jm-toggle{position:relative;}
.jm-toggle img{position:absolute;inset:0;margin:auto;width:28px;height:28px;transition:opacity .2s ease,transform .35s cubic-bezier(.4,0,.2,1);}
/* ☰ e ✕ trocam girando um quarto de volta */
.jm-toggle .jm-x,.jm-open .jm-toggle .jm-bars{opacity:0;transform:rotate(-90deg);}.jm-open .jm-toggle .jm-x{opacity:1;transform:none;}
.jm-toggle:focus-visible,.jm-panel a:focus-visible,.jm-panel button:focus-visible{outline:2px solid #262e33;outline-offset:3px;}
.nav.small .jm-toggle{width:36px;height:36px;}.nav.small .jm-toggle img{width:22px;height:22px;}
.nav.jm-open,.nav.jm-saindo{z-index:101;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;}.nav.jm-open .modo{visibility:hidden;}
.jm-shade{position:fixed;inset:0;z-index:99;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(27px);backdrop-filter:blur(27px);opacity:0;transition:opacity .36s ease;}
.jm-open+.jm-shade{opacity:1;transition-duration:.4s;}
.jm-panel{position:absolute;left:0;right:0;top:calc(100% - 22px);background:#fff;box-shadow:0 60px 100px rgba(0,0,0,.1);padding:0 24px 85px;font-family:inherit;text-align:left;}
.nav.small .jm-panel{top:100%;padding-top:20px;}
/* abrir e fechar no estilo apple.com: o painel desce como cortina e as colunas entram em sequência; fechar é mais curto e sem sequência.
   menu.js põe jm-open depois de mostrar o painel e só o esconde quando o fechar termina (480 ms, com jm-saindo) */
.jm-panel{clip-path:inset(0 0 100% 0);transition:clip-path .36s cubic-bezier(.4,0,.2,1);}
.jm-open .jm-panel{clip-path:inset(0);transition-duration:.48s;transition-timing-function:cubic-bezier(.2,.8,.2,1);}
.jm-cols>div,.jm-head,.jm-start{opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .3s ease;}
.jm-open .jm-cols>div,.jm-open .jm-head,.jm-open .jm-start{opacity:1;transform:none;transition:opacity .32s ease .12s,transform .45s cubic-bezier(.2,.8,.2,1) .12s;}
.jm-open .jm-cols>div:nth-child(2){transition-delay:.16s;}.jm-open .jm-cols>div:nth-child(3){transition-delay:.2s;}.jm-open .jm-cols>div:nth-child(4){transition-delay:.24s;}.jm-open .jm-start{transition-delay:.28s;}
html:not(.jm) .jm-toggle,.jm-shade[hidden],.jm-panel[hidden]{display:none;}/* botão só aparece com o menu.js rodando (classe jm no html) */
.jm-cols{display:grid;grid-template-columns:207px 198px 195px auto;justify-content:center;}
.jm-panel ul{list-style:none;margin:0;padding:0;}.jm-panel a{text-decoration:none;}/* a nav do blog tem z-index 50 e sublinha link */
button.jm-h{padding:0;border:0;background:none;font-family:inherit;text-align:left;cursor:default;}
.jm-h{display:block;margin:0 0 9.6px;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.16px;color:#000;}
a.jm-h:hover,.jm-panel li a:hover{text-decoration:underline;}
.jm-panel li a{font-size:14px;line-height:2;letter-spacing:-.14px;color:#000;}
.jm-plan{margin-bottom:40.6px;}
.jm-head,.jm-chev,.jm-start{display:none;}
@media (max-width:760px){
  .jm-toggle{width:32px;height:32px;margin-right:10px;}.jm-toggle img,.nav.small .jm-toggle img{width:18.67px;height:18.67px;}.nav.small .jm-toggle{width:32px;height:32px;}
  .nav.small .modo{opacity:0;pointer-events:none;}
  .jm-shade{display:none!important;}
  .jm-panel,.nav.small .jm-panel{position:fixed;inset:0;top:0;z-index:200;overflow-y:auto;background:#f5f5f5;box-shadow:none;padding:24px 24px 40px;}
  /* celular: a tela do menu aparece em fade (sem cortina) e os grupos descem em cascata */
  .jm-panel,.jm-open .jm-panel{clip-path:none;opacity:0;transition:opacity .3s ease .16s;}.jm-open .jm-panel{opacity:1;transition:opacity .3s ease;}
  /* fechar no celular: os grupos sobem e somem de baixo pra cima, depois a tela some (0,46 s; o menu.js espera 480 ms) */
  .jm-saindo .jm-cols>div,.jm-saindo .jm-head,.jm-saindo .jm-start{transition:opacity .2s ease,transform .28s cubic-bezier(.4,0,1,1);}
  .jm-saindo .jm-start{transition-delay:0s;}.jm-saindo .jm-cols>div:nth-child(4){transition-delay:.03s;}.jm-saindo .jm-cols>div:nth-child(3){transition-delay:.06s;}.jm-saindo .jm-cols>div:nth-child(2){transition-delay:.09s;}.jm-saindo .jm-cols>div:nth-child(1){transition-delay:.12s;}.jm-saindo .jm-head{transition-delay:.12s;}
  /* Figma 2835:176684/176712: títulos a cada 57 (o 1º em y=88), lista 42 abaixo do título, divisória 17 abaixo da lista e 21 acima do próximo; botão em y=502 com tudo fechado e 25 abaixo do último título com um grupo aberto */
  .jm-panel .jm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;}
  .jm-head img{width:32px;height:32px;}
  .jm-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fefefd;border:0;padding:0;cursor:pointer;}
  .jm-close img{width:18.67px;height:18.67px;}
  .jm-cols{display:block;min-height:412px;}
  /* submenu: a lista desce (grid 0fr -> 1fr), os itens entram em cascata e a divisória aparece; fechar faz o caminho inverso */
  .jm-g{transition:margin-bottom .32s cubic-bezier(.2,.8,.2,1);}.jm-g.on{margin-bottom:21px;}
  .jm-g::after{content:"";display:block;max-width:338px;height:1px;margin-top:-1px;background:#d8dcdf;opacity:0;transition:margin-top .32s cubic-bezier(.2,.8,.2,1),opacity .2s ease;}
  .jm-g.on::after{margin-top:17px;opacity:1;}
  .jm-panel .jm-g .jm-h{transition:margin-bottom .32s cubic-bezier(.2,.8,.2,1);}.jm-panel .jm-g.on .jm-h{margin-bottom:8.4px;}
  .jm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.8,.2,1);}
  .jm-g.on .jm-sub{grid-template-rows:1fr;}
  .jm-sub>ul{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .32s;}.jm-g.on .jm-sub>ul{visibility:visible;transition:none;}
  .jm-sub li{opacity:0;transform:translateY(-6px);transition:opacity .15s ease,transform .2s ease;}
  .jm-g.on .jm-sub li{opacity:1;transform:none;transition:opacity .28s ease,transform .36s cubic-bezier(.2,.8,.2,1);}
  .jm-g.on .jm-sub li:nth-child(2){transition-delay:.02s;}.jm-g.on .jm-sub li:nth-child(3){transition-delay:.04s;}.jm-g.on .jm-sub li:nth-child(4){transition-delay:.06s;}.jm-g.on .jm-sub li:nth-child(5){transition-delay:.08s;}.jm-g.on .jm-sub li:nth-child(6){transition-delay:.1s;}.jm-g.on .jm-sub li:nth-child(7){transition-delay:.12s;}.jm-g.on .jm-sub li:nth-child(8){transition-delay:.14s;}.jm-g.on .jm-sub li:nth-child(n+9){transition-delay:.16s;}
  .jm-panel .jm-h{display:flex;align-items:center;justify-content:space-between;width:100%;height:33.6px;margin:0 0 23.4px;padding:0;font-size:24px;line-height:1.4;letter-spacing:-.24px;background:none;border:0;text-align:left;color:#000;cursor:pointer;}
  a.jm-h:hover{text-decoration:none;}
  .jm-panel .jm-chev{display:block;width:24px;height:24px;margin-right:4px;transition:transform .2s;}.jm-g.on .jm-chev{transform:rotate(180deg);}
  .jm-panel li a{font-size:18px;letter-spacing:-.18px;color:#5a656d;}
  .jm-panel .jm-start{display:flex;align-items:center;justify-content:center;max-width:338px;height:40px;margin-top:2px;border-radius:32px;background:#222;color:#eee;font-size:12px;font-weight:500;letter-spacing:-.36px;}
  body.jm-lock{overflow:hidden;}
}
@media (min-width:761px){.jm-mobile{display:none;}}
@media (prefers-reduced-motion:reduce){.jm-panel,.jm-shade,.jm-cols>div,.jm-head,.jm-start,.jm-toggle img,.jm-g,.jm-g::after,.jm-h,.jm-sub,.jm-sub>ul,.jm-sub li{transition:none!important;}}
/* topo no celular (Figma 2835:176623): botão "Começar" 84x32 e, na home, a chave do modo fiel centralizada 16 px abaixo da barra */
@media (max-width:560px){
  .jm-d{display:none;}
  .nav .btn:has(.jm-d){width:84px;}
  .nav .modo{left:50%;top:calc(100% + 16px);}
}
