/* Nanquim · estilos do site. Só composição de página: valores sempre por token do design system (var(--nq-…)).
   Componentes (botão, campo, pranchas, etc.) vêm de /ds/dist/nanquim.css.
   Linguagem: exposição de tinta com brutalismo de escala. Cada sala tem um kanji gigante (vermelho no sumi, sumi no papel)
   e o nome em Anton; o resto fica quieto. Nada de cartões: o conteúdo pousa direto no fundo da sala. */

/* Paleta: só sumi, washi (um branco de papel neutro) e shu; filetes e superfícies são misturas das duas primeiras.
   Vem pronta dos tokens do sistema (design-system/tokens.json, revisados em 01/11/2026). */

/* ---------- base e superfícies do navegador ---------- */
html{background:var(--nq-sumi);scrollbar-color:var(--nq-sumi-3) var(--nq-sumi);color-scheme:dark}
body{margin:0;min-height:100vh;caret-color:var(--nq-accent)}
::selection{background:var(--nq-accent-fill);color:var(--nq-on-accent-fill)}
img{max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}

.pular-conteudo{position:fixed;left:var(--nq-space-4);top:var(--nq-space-4);z-index:calc(var(--nq-z-pular) + 1);padding:12px 16px;background:var(--nq-washi);color:var(--nq-sumi);font:600 13px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;transform:translateY(-200%)}
.pular-conteudo:focus{transform:none}

/* sala clara dentro de uma página escura: o tema muda o fundo e a tinta */
[data-theme="washi"].fundo,.sala[data-theme]{background:var(--nq-bg);color:var(--nq-text)}

/* ---------- cabeçalho ----------
   Sem filete e sem fundo no topo: faz parte da página. Ao rolar, ganha o sumi liso (sem translúcido); descendo, sai de cena
   e volta quando a pessoa sobe (src/scripts/cena.ts). */
.cab{position:fixed;inset:0 0 auto;z-index:var(--nq-z-header);background:transparent;view-transition-name:cab;
  transition:background-color var(--nq-dur-base) var(--nq-ease-tinta),transform var(--nq-dur-etapa) var(--nq-ease-pincel)}
.cab.is-solido{background:var(--nq-sumi)}
.cab.is-escondido{transform:translateY(-101%)}
.cab__in{display:flex;align-items:center;justify-content:space-between;gap:var(--nq-space-5);min-height:72px;max-width:var(--nq-container);margin-inline:auto}
.cab__logo{display:block;line-height:0;transition:opacity var(--nq-dur-base) var(--nq-ease-tinta),visibility 0s}
.cab__logo img{width:200px;height:auto}
/* na home o topo já mostra o nome em escala: o logo do cabeçalho só aparece depois */
.cab--home:not(.is-solido) .cab__logo{opacity:0;visibility:hidden;transition:opacity var(--nq-dur-base) var(--nq-ease-tinta),visibility 0s var(--nq-dur-base)}
.cab__nav{display:flex;align-items:center;gap:var(--nq-space-6)}
.cab__salas{display:flex;gap:var(--nq-space-6);list-style:none;margin:0;padding:0}
.cab__sala{position:relative;display:inline-flex;align-items:center;gap:.6em;min-height:44px;text-decoration:none;font:600 12px/1.3 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--nq-text-muted);transition:color var(--nq-dur-fast) var(--nq-ease-tinta)}
.cab__sala [lang="ja"]{font:600 15px/1 var(--font-jp);letter-spacing:.1em;color:var(--nq-text-muted);text-transform:none;transition:color var(--nq-dur-fast) var(--nq-ease-tinta)}
.cab__sala:hover,.cab__sala[aria-current="page"]{color:var(--nq-text)}
.cab__sala:hover [lang="ja"],.cab__sala[aria-current="page"] [lang="ja"]{color:var(--nq-accent)}
/* sala atual: carimbo pequeno, nunca sublinhado */
.cab__sala[aria-current="page"]::after{content:"";position:absolute;right:-12px;top:8px;width:8px;height:8px;background:var(--nq-accent-fill);rotate:-8deg}
.cab__menu{display:none}
.cab__rodape{display:none}
@media (max-width:899px){
  .cab__logo img{width:168px}
  .cab__menu{display:inline-flex;position:relative;z-index:1}
  /* menu do celular: uma cortina de tinta que desce e ocupa a tela; as salas em Anton, grandes */
  .cab__nav{position:fixed;inset:0;height:100dvh;box-sizing:border-box;flex-direction:column;align-items:stretch;justify-content:space-between;gap:var(--nq-space-7);
    padding:calc(72px + var(--nq-space-7)) var(--nq-gutter) calc(var(--nq-space-7) + env(safe-area-inset-bottom,0px));background:var(--nq-sumi);
    visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path var(--nq-dur-etapa) var(--nq-ease-pincel),visibility 0s var(--nq-dur-etapa)}
  .cab.is-aberto{background:var(--nq-sumi)}
  .cab.is-aberto .cab__nav{visibility:visible;clip-path:inset(0);transition-delay:0s}
  .cab.is-aberto .cab__logo{opacity:1;visibility:visible;position:relative;z-index:1}
  .cab__salas{flex-direction:column;gap:var(--nq-space-2)}
  /* o kanji numa coluna de largura fixa: os nomes alinham mesmo com 癒やし, que é mais largo */
  .cab__sala{display:grid;grid-template-columns:1.7em auto;font:400 clamp(44px,13vw,64px)/1 var(--font-sala);letter-spacing:.01em;color:var(--nq-text);gap:.2em;align-items:baseline}
  .cab__sala [lang="ja"]{font:500 .42em/1 var(--font-jp);color:var(--nq-text-muted);white-space:nowrap}
  .cab__sala[aria-current="page"]::after{right:auto;left:-14px;top:.35em}
  .cab__nav .nq-btn--primario{min-height:56px;justify-content:center}
  .cab__rodape{display:block;margin:0;font-size:14px;color:var(--nq-text-muted)}
  .cab__salas>li,.cab__nav>.nq-btn,.cab__rodape{opacity:0;translate:0 8px;transition:opacity var(--nq-dur-base) var(--nq-ease-tinta),translate var(--nq-dur-base) var(--nq-ease-tinta)}
  .cab.is-aberto .cab__salas>li,.cab.is-aberto .cab__nav>.nq-btn,.cab.is-aberto .cab__rodape{opacity:1;translate:none;transition-delay:calc(120ms + var(--i,4) * 40ms)}
}
@media (prefers-reduced-motion:reduce){
  .cab,.cab__nav,.cab__logo,.cab__salas>li,.cab__nav>.nq-btn,.cab__rodape{transition-property:opacity,background-color,visibility}
  .cab.is-escondido{transform:none}
}
.com-cab{padding-top:72px}

/* ---------- kanji gigante ----------
   Um por sala, inteiro, em Mochiy Pop P One e na cor nq-kanji (vermelho no sumi, sumi no papel). Decorativo: aria-hidden,
   com o nome da sala ao lado. Nasce como a mancha do Revelar e, rolando, anda um pouco mais devagar que a página. */
.kj-g{margin:0;font:400 var(--kj-tam,clamp(200px,30vw,440px))/.86 var(--font-kanji);color:var(--nq-kanji);letter-spacing:-.04em;
  user-select:none;pointer-events:none;--nq-revela-origem:50% 50%}
/* o span tem lang="ja": sem isto, a regra de japonês do sistema (Shippori) venceria a herança */
.kj-g>span{display:block;font:inherit}
.kj-g--v{writing-mode:vertical-rl;text-orientation:upright}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .kj-g{animation:kj-deriva linear both;animation-timeline:view();animation-range:cover}
  }
}
@keyframes kj-deriva{from{translate:0 9%}to{translate:0 -9%}}

/* ---------- salas ---------- */
.sala{position:relative;padding-block:clamp(var(--nq-space-9),12vw,calc(var(--nq-space-10) * 1.5));overflow:clip}
.sala__in{position:relative;max-width:var(--nq-container);margin-inline:auto}
.sala__txt{display:grid;gap:var(--nq-space-5);justify-items:start;align-content:start}
/* o nome da sala em Anton, no lugar da etiqueta miúda: o kanji gigante já faz o papel do kanji */
.sala__nome{margin:0;font:400 clamp(26px,3vw,44px)/.9 var(--font-sala);letter-spacing:.02em;text-transform:uppercase;color:var(--nq-text)}
.sala__titulo{margin:0;max-width:14ch;padding-bottom:.08em;font:400 clamp(52px,8.2vw,136px)/.94 var(--font-display);letter-spacing:-.025em;text-wrap:balance;color:var(--nq-text)}
.sala__titulo em{font-style:italic;color:var(--nq-accent)}
/* com o kanji vermelho, o itálico do título fica na cor do texto: um vermelho por tela */
.sala--kj:not([data-theme="washi"]) .sala__titulo em{color:inherit}
.sala__lead{margin:0;max-width:44ch;font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:var(--nq-text-muted)}
.sala__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nq-space-5) var(--nq-space-7)}

/* ---------- home ---------- */
/* topo: 刺青 gigante sobre o nome; o ensō segue no lugar dele (as medidas do topo são do Dragão) */
.hero-kj{margin:0;font:400 clamp(112px,17vw,272px)/.86 var(--font-kanji);letter-spacing:-.05em;color:var(--nq-kanji);user-select:none}
.hero-txt>.hero-kj{opacity:1;translate:none;clip-path:inset(-10% 100% -10% 0);transition:clip-path var(--nq-dur-entrada) var(--nq-ease-escreve)}
.ready .hero-txt>.hero-kj{clip-path:inset(-10% -4% -10% 0)}
.hero .kj-row{gap:var(--nq-space-4)}
.hero .tag{font-size:clamp(16px,1.3vw,19px);color:var(--nq-text-muted)}
@media (max-width:759px){.hero-kj{font-size:clamp(84px,26vw,128px)}}
@media (prefers-reduced-motion:reduce){.hero-txt>.hero-kj{clip-path:none;transition:none}}

/* manifesto: o texto maior; o kanji da sala fica atrás do dragão, entre o papel e a tinta */
.tinta .m{font-size:clamp(50px,8.4vw,132px);line-height:.98;max-width:13ch}
.tinta .m.small{font-size:clamp(28px,3.8vw,58px);line-height:1.1;max-width:20ch}
.tinta .m .lbl{font-size:12px;letter-spacing:.22em}
.tinta>.kj-g{position:absolute;z-index:var(--nq-z-papel);--kj-tam:clamp(260px,46vw,720px)}
#tinta>.kj-g{left:calc(var(--nq-gutter) * -.5);bottom:18svh}
#clara>.kj-g{left:var(--nq-gutter);top:36%;--kj-tam:clamp(240px,38vw,560px)}
/* no celular os dois textos ocupam a largura: o kanji fica no vão entre eles, nunca atrás das letras */
@media (max-width:759px){.tinta>.kj-g{--kj-tam:72vw}#tinta>.kj-g{bottom:auto;top:36%}#clara>.kj-g{top:36%}}

/* a arte (home): papel de ponta a ponta, as pranchas direto nele */
.arte__cab{display:grid;gap:var(--nq-space-7);align-items:end;margin-bottom:clamp(var(--nq-space-8),8vw,var(--nq-space-10))}
@media (min-width:900px){.arte__cab{grid-template-columns:minmax(0,1fr) auto}}
.arte__cab .kj-g{--kj-tam:clamp(180px,24vw,360px);justify-self:end}
.arte__mais{margin:clamp(var(--nq-space-8),6vw,var(--nq-space-9)) 0 0}

/* o ofício: o título fica parado à esquerda enquanto os passos passam */
.oficio{display:grid;gap:var(--nq-space-9) var(--nq-space-9)}
/* o texto da sala rola; o kanji fica preso ao lado dos passos, como um selo, até o último passar */
@media (min-width:900px){
  .oficio{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .oficio__fixo{align-self:stretch}
  .oficio__fixo .kj-g{position:sticky;top:calc(72px + var(--nq-space-7))}
}
.oficio__fixo{display:grid;gap:var(--nq-space-8);align-content:start}
.oficio__fixo .kj-g{--kj-tam:clamp(180px,24vw,360px)}
.passos{display:grid;list-style:none;margin:0;padding:0}
.passo{display:grid;gap:var(--nq-space-4);padding-block:var(--nq-space-8);border-top:1px solid var(--nq-border)}
.passo:first-child{border-top:0;padding-top:0}
.passo__kj{margin:0;font:500 clamp(28px,2.6vw,40px)/1 var(--font-jp);color:var(--nq-text-muted)}
.passo__nome{margin:0;font:400 clamp(40px,4.6vw,76px)/.98 var(--font-display);letter-spacing:-.02em;color:var(--nq-text)}
.passo p{margin:0;max-width:40ch;font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--nq-text-muted)}

/* suminagashi: só o cabeçalho da sala é do site; a água é a peça */
.sumi-cab{display:grid;gap:var(--nq-space-5);max-width:var(--nq-container);margin:0 auto var(--nq-space-8)}
.sumi-cab .sala__titulo em{color:inherit}

/* o ritual: cartaz. O kanji ocupa a esquerda, o convite a direita */
.ritual{display:grid;gap:var(--nq-space-7);align-items:center;min-height:min(88svh,980px)}
@media (min-width:900px){.ritual{grid-template-columns:auto minmax(0,1fr);gap:var(--nq-space-9)}}
.ritual .kj-g{--kj-tam:clamp(240px,34vw,520px)}
.ritual .sala__titulo{font-size:clamp(60px,10vw,168px);max-width:9ch}

/* ---------- galeria de pranchas ----------
   Sem moldura nem caixa: a prancha (arquivo -tinta) pousa direto no papel da sala. */
.galeria{display:grid;gap:clamp(var(--nq-space-7),5vw,var(--nq-space-9)) clamp(var(--nq-space-5),3vw,var(--nq-space-7));grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr));list-style:none;margin:0;padding:0}
.pc{display:grid;gap:var(--nq-space-4);text-decoration:none;color:var(--nq-text)}
.pc__img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden}
.pc__img img{width:100%;height:100%;object-fit:contain;transition:scale 640ms var(--nq-ease-tinta)}
.pc__leg{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pc__kj{font:500 22px/1 var(--font-jp);color:var(--nq-accent)}
.pc__nome{font:400 clamp(28px,2.4vw,34px)/1.05 var(--font-display);transition:color var(--nq-dur-fast) var(--nq-ease-tinta)}
.pc__sen{flex-basis:100%;font:600 12px/1.4 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--nq-text-muted)}
.pc:hover .pc__nome,.pc:focus-visible .pc__nome{color:var(--nq-accent)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.pc:hover .pc__img img{scale:1.035}}
.pc:active .pc__img img{scale:.98;transition-duration:var(--nq-dur-fast)}
.pc--ideia .pc__img{display:grid;place-items:center}
.pc--ideia .pc__img b{font:400 clamp(120px,14vw,200px)/1 var(--font-kanji);color:var(--nq-text)}
/* entrada: cada prancha sobe do papel, uma depois da outra (cena.ts arma só com movimento) */
.pc.is-armada .pc__img{clip-path:inset(100% 0 0 0)}
.pc.is-armada .pc__leg{opacity:0}
@media print{.pc.is-armada .pc__img{clip-path:none}.pc.is-armada .pc__leg{opacity:1}}
.galeria-sala{padding-block:clamp(var(--nq-space-9),9vw,var(--nq-space-10))}
.galeria-sala>.galeria{max-width:var(--nq-container);margin-inline:auto}

/* ---------- página da prancha: o papel de um lado, a sala escura do outro, sem moldura ---------- */
.pp{display:grid;min-height:calc(100svh - 72px)}
@media (min-width:900px){.pp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pp__papel{display:grid;place-items:center;padding:clamp(var(--nq-space-6),5vw,var(--nq-space-9))}
@media (min-width:900px){.pp__papel{position:sticky;top:72px;height:calc(100svh - 72px);box-sizing:border-box}}
.pp__papel img{display:block;width:100%;max-height:100%;aspect-ratio:4/5;object-fit:contain}
@media (min-width:900px){.pp__papel img{width:auto;height:100%}}
.pp__txt{position:relative;display:grid;gap:var(--nq-space-7);align-content:start;padding:clamp(var(--nq-space-7),6vw,var(--nq-space-10)) var(--nq-gutter) var(--nq-space-9)}
@media (min-width:760px){.pp__txt{padding-inline:var(--nq-gutter-wide)}}
.pp__cab{display:grid;gap:var(--nq-space-4);justify-items:start}
.pp__kj{--kj-tam:clamp(160px,18vw,300px)}
.pp__dados{display:grid;grid-template-columns:auto 1fr;gap:var(--nq-space-3) var(--nq-space-6);margin:0;padding-top:var(--nq-space-5);border-top:1px solid var(--nq-border)}
.pp__dados dt{font:600 12px/1.6 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--nq-text-muted)}
.pp__dados dd{margin:0;color:var(--nq-text);line-height:1.6}
.pp__nav{display:flex;justify-content:space-between;gap:var(--nq-space-5);padding-top:var(--nq-space-5);border-top:1px solid var(--nq-border)}
.pp__nav a{display:grid;gap:var(--nq-space-1);min-height:44px;text-decoration:none;color:var(--nq-text)}
.pp__nav a span{font:600 12px/1.3 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--nq-text-muted)}
.pp__nav a b{font:400 clamp(26px,2.4vw,36px)/1.05 var(--font-display);transition:color var(--nq-dur-fast) var(--nq-ease-tinta)}
.pp__nav a:hover b{color:var(--nq-accent)}
.pp__nav a[rel="next"]{text-align:right;margin-left:auto}

/* ---------- páginas de conteúdo (quanto custa, cuidados, dúvidas, estúdio, políticas) ---------- */
/* topo: o kanji gigante da sala à direita, inteiro (vários caracteres empilham em pé) */
.topo{padding-block:clamp(var(--nq-space-8),8vw,var(--nq-space-10)) clamp(var(--nq-space-8),7vw,var(--nq-space-10));overflow:clip}
.topo__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--nq-space-7);align-items:center;max-width:var(--nq-container);margin-inline:auto}
.topo__kj{--kj-tam:calc(clamp(200px,28vw,420px) / (1 + (var(--n) - 1) * .42))}
@media (max-width:759px){
  .topo__in{grid-template-columns:1fr;gap:var(--nq-space-6)}
  .topo__kj{order:-1;justify-self:end;--kj-tam:calc(46vw / (1 + (var(--n) - 1) * .3))}
  .topo__kj.kj-g--v{writing-mode:horizontal-tb}
}

/* bloco: o título numa coluna, o conteúdo na outra */
.blocos{padding-bottom:var(--nq-space-10)}
.bloco{display:grid;gap:var(--nq-space-5) var(--nq-space-8);max-width:var(--nq-container);margin-inline:auto;padding-block:clamp(var(--nq-space-8),6vw,var(--nq-space-9));border-top:1px solid var(--nq-border);scroll-margin-top:calc(72px + var(--nq-space-5))}
@media (min-width:900px){.bloco{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}.bloco__cab{position:sticky;top:calc(72px + var(--nq-space-6));align-self:start}}
.bloco__cab{display:grid;gap:var(--nq-space-3);align-content:start}
.bloco__tit{scroll-margin-top:calc(72px + var(--nq-space-6));margin:0;font:400 clamp(34px,3.8vw,60px)/1 var(--font-display);letter-spacing:-.02em;color:var(--nq-text);text-wrap:balance}
.bloco__corpo{display:grid;gap:var(--nq-space-6);align-content:start;min-width:0}
.bloco__corpo>p,.texto>p{margin:0;max-width:var(--nq-measure);font-size:18px;line-height:1.65;color:var(--nq-text)}
.bloco__corpo .nq-muted{color:var(--nq-text-muted)}
.texto{display:grid;gap:var(--nq-space-4)}
.texto a,.bloco__corpo a:not(.nq-btn){color:var(--nq-text);text-decoration-color:var(--nq-border-field);transition:text-decoration-color var(--nq-dur-fast) var(--nq-ease-tinta)}
.texto a:hover,.bloco__corpo a:not(.nq-btn):hover{text-decoration-color:var(--nq-accent)}

/* nota (demonstração, valores de exemplo, quando procurar ajuda): o kanji e o texto direto no fundo, sem caixa */
.nota{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--nq-space-2) var(--nq-space-6);align-items:start;padding-top:var(--nq-space-6);border-top:1px solid var(--nq-border)}
.nota__kj{grid-row:1 / span 2;margin:0;writing-mode:vertical-rl;text-orientation:upright;font:400 clamp(48px,5vw,72px)/1 var(--font-kanji);color:var(--nq-accent)}
.nota__tit{margin:0;font:400 clamp(26px,2.4vw,34px)/1 var(--font-sala);letter-spacing:.02em;text-transform:uppercase;color:var(--nq-text)}
.nota>p:last-child{margin:0;max-width:var(--nq-measure);line-height:1.6;color:var(--nq-text-muted)}

/* lista com filetes: termo em cima, explicação embaixo */
.lista{display:grid;list-style:none;margin:0;padding:0}
.lista>li{display:grid;gap:var(--nq-space-1);align-content:start;padding-block:var(--nq-space-5);border-top:1px solid var(--nq-border)}
.lista b{font:400 clamp(22px,1.9vw,28px)/1.15 var(--font-display);color:var(--nq-text)}
.lista span{max-width:var(--nq-measure);line-height:1.6;color:var(--nq-text-muted)}
@media (min-width:640px){.lista--2{grid-template-columns:1fr 1fr;column-gap:var(--nq-space-7)}}

/* faixas de valor: o número é a peça */
.faixas{display:grid;gap:var(--nq-space-7) var(--nq-space-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));list-style:none;margin:0;padding:0}
.faixa{display:grid;gap:var(--nq-space-2);align-content:start}
.faixa__nome{margin:0;font:400 clamp(26px,2.4vw,34px)/1 var(--font-sala);letter-spacing:.02em;text-transform:uppercase;color:var(--nq-text)}
.faixa__valor{display:grid;gap:var(--nq-space-1);margin:var(--nq-space-3) 0 0;font:400 clamp(56px,6vw,96px)/.92 var(--font-display);letter-spacing:-.03em;color:var(--nq-text);font-variant-numeric:lining-nums}
.faixa__valor small{font:500 15px/1.4 var(--font-ui);letter-spacing:0;color:var(--nq-text-muted)}
.faixa__sessao{margin:0;line-height:1.5;color:var(--nq-text-muted)}

/* linha do tempo (cuidados) */
.tempo{display:grid;list-style:none;margin:0;padding:0;border-left:1px solid var(--nq-border-field)}
.tempo>li{position:relative;display:grid;gap:var(--nq-space-2);padding:0 0 var(--nq-space-8) var(--nq-space-6)}
.tempo>li:last-child{padding-bottom:0}
.tempo>li::before{content:"";position:absolute;left:-5px;top:.2em;width:9px;height:9px;background:var(--nq-text);rotate:-4deg}
.tempo h3{margin:0;font:400 clamp(28px,2.6vw,40px)/1.05 var(--font-display);color:var(--nq-text)}
.tempo p{margin:0;max-width:var(--nq-measure);line-height:1.6;color:var(--nq-text-muted)}

/* dúvidas: cada pergunta é um <details> com âncora */
.indice{display:flex;flex-wrap:wrap;gap:var(--nq-space-2) var(--nq-space-6);list-style:none;margin:0;padding:0}
.indice a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font:400 clamp(22px,2vw,28px)/1 var(--font-sala);letter-spacing:.02em;text-transform:uppercase;color:var(--nq-text-muted);transition:color var(--nq-dur-fast) var(--nq-ease-tinta)}
.indice a:hover{color:var(--nq-text)}
.faq{display:grid;list-style:none;margin:0;padding:0}
.faq>li{border-top:1px solid var(--nq-border);scroll-margin-top:calc(72px + var(--nq-space-5))}
.faq>li:last-child{border-bottom:1px solid var(--nq-border)}
.faq summary{display:flex;align-items:baseline;justify-content:space-between;gap:var(--nq-space-5);min-height:44px;padding-block:var(--nq-space-5);cursor:pointer;list-style:none;font:400 clamp(24px,2.2vw,32px)/1.2 var(--font-display);color:var(--nq-text);transition:color var(--nq-dur-fast) var(--nq-ease-tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 28px/1 var(--font-ui);color:var(--nq-text-muted);transition:rotate var(--nq-dur-base) var(--nq-ease-mola)}
.faq summary:hover{color:var(--nq-accent)}
.faq details[open]>summary::after{rotate:45deg}
.faq__r{margin:0;padding-bottom:var(--nq-space-6);max-width:var(--nq-measure);font-size:18px;line-height:1.65;color:var(--nq-text-muted)}
/* a resposta entra como pincel, da esquerda para a direita (o mesmo gesto da troca de etapa) */
@media (prefers-reduced-motion:no-preference){.faq details[open]>.faq__r{animation:nq-pincel var(--nq-dur-etapa) var(--nq-ease-pincel) both}}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* contatos */
.contatos{display:grid;margin:0}
.contatos>div{display:grid;gap:var(--nq-space-1);padding-block:var(--nq-space-5);border-top:1px solid var(--nq-border)}
.contatos dt{font:600 12px/1.3 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--nq-text-muted)}
.contatos dd{margin:0;font:400 clamp(28px,3vw,44px)/1.1 var(--font-display)}
.contatos dd a{color:var(--nq-text);text-decoration:none;overflow-wrap:anywhere;transition:color var(--nq-dur-fast) var(--nq-ease-tinta)}
.contatos dd a:hover{color:var(--nq-accent)}

/* ---------- rodapé ----------
   Fecha a exposição: o selo e a frase, as salas e os contatos, e o nome em curvas de ponta a ponta, que sobe da tinta
   quando o rodapé entra na tela. */
.rod{position:relative;z-index:var(--nq-z-texto);background:var(--nq-sumi);padding-top:clamp(var(--nq-space-9),10vw,calc(var(--nq-space-10) * 1.25));overflow:clip}
.rod__in{max-width:var(--nq-container);margin-inline:auto}
.rod__grade{display:grid;gap:var(--nq-space-8) var(--nq-space-7)}
.rod__grade{grid-template-columns:repeat(2,minmax(0,1fr))}
.rod__marca,.rod__col:last-child{grid-column:1 / -1}
@media (min-width:760px){.rod__grade{grid-template-columns:repeat(3,minmax(0,1fr))}.rod__col:last-child{grid-column:auto}}
@media (min-width:1100px){.rod__grade{grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr))}.rod__marca{grid-column:auto}}
.rod__marca{display:grid;gap:var(--nq-space-6);justify-items:start;align-content:start}
.rod__marca .nq-selo{width:72px}
.rod.is-armado .rod__marca .nq-selo:not(.nq-selo--carimba){opacity:0}
.rod__frase{margin:0;max-width:16ch;font:400 clamp(34px,3.6vw,54px)/1.02 var(--font-display);letter-spacing:-.02em;color:var(--nq-text)}
.rod__col{display:grid;gap:var(--nq-space-4);align-content:start}
.rod__tit{margin:0;font:600 12px/1.3 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--nq-text-muted)}
.rod__links{display:grid;gap:var(--nq-space-1);list-style:none;margin:0;padding:0}
.rod__links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font:400 clamp(22px,1.8vw,26px)/1.1 var(--font-display);color:var(--nq-text);transition:color var(--nq-dur-fast) var(--nq-ease-tinta)}
.rod__links a:hover{color:var(--nq-accent)}
.rod__links--miudo a{font:500 16px/1.3 var(--font-ui);color:var(--nq-text-muted)}
.rod__links--miudo a:hover{color:var(--nq-text)}
.rod__hora{margin:var(--nq-space-2) 0 0;font-size:15px;line-height:1.5;color:var(--nq-text-muted)}
.rod__logo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(var(--nq-space-5),3vw,var(--nq-space-8));margin-top:clamp(var(--nq-space-9),9vw,var(--nq-space-10));color:var(--nq-text)}
.rod__logo svg{display:block;width:100%;height:auto}
.rod__simbolo{display:block;width:clamp(96px,15vw,230px)}
.rod__nome{display:block}
/* o logo se pinta enquanto o rodapé entra: o ensō corre em sentido anti-horário a partir da ponta (como no Carregamento),
   depois o nome é escrito da esquerda para a direita. A faixa da animação é só a entrada (entry): o logo fica no fim da
   página e nunca sobe muito, então ela precisa terminar quando ele acaba de entrar. Sem suporte ou com movimento
   reduzido, o logo já está inteiro. */
@property --enso{syntax:"<angle>";inherits:false;initial-value:360deg}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rod__logo{view-timeline:--logo block}
    .rod__simbolo{-webkit-mask-image:conic-gradient(from 23deg,transparent calc(360deg - var(--enso) - 10deg),#000 calc(360deg - var(--enso)));mask-image:conic-gradient(from 23deg,transparent calc(360deg - var(--enso) - 10deg),#000 calc(360deg - var(--enso)));
      animation:enso-pinta linear both;animation-timeline:--logo;animation-range:entry 0% entry 80%}
    .rod__nome{animation:nome-escreve linear both;animation-timeline:--logo;animation-range:entry 30% entry 100%}
  }
}
@keyframes enso-pinta{from{--enso:0deg;rotate:-8deg}to{--enso:370deg;rotate:0deg}}
@keyframes nome-escreve{from{clip-path:inset(-10% 100% -10% 0);translate:0 12%}to{clip-path:inset(-10% -2% -10% 0);translate:0 0}}
@media (max-width:759px){.rod__logo{grid-template-columns:1fr;justify-items:start}.rod__simbolo{width:34vw}}
.rod__base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--nq-space-3) var(--nq-space-6);padding-block:var(--nq-space-6) calc(var(--nq-space-6) + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--nq-text-muted)}
.rod__base p{margin:0}
.rod__base a{display:inline-flex;align-items:center;min-height:44px;color:var(--nq-text-muted);text-decoration:none;font:600 12px/1.3 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;transition:color var(--nq-dur-fast) var(--nq-ease-tinta)}
.rod__base a:hover{color:var(--nq-text)}

/* ---------- passagem entre páginas ----------
   A página nova entra como uma pincelada de tinta, da esquerda para a direita (o mesmo gesto da troca de etapa no orihon);
   o cabeçalho fica parado e a prancha escolhida viaja da galeria até a página dela. Navegadores sem View Transitions
   trocam de página normalmente; com movimento reduzido, não há passagem. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:vt-pincel var(--nq-dur-sala) var(--nq-ease-pincel) both;
  -webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@keyframes vt-pincel{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
::view-transition-group(*){animation-duration:var(--nq-dur-sala);animation-timing-function:var(--nq-ease-pincel)}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-new(*),::view-transition-old(*){animation:none}
}

/* ---------- progresso de leitura ----------
   Um fio de tinta na base do cabeçalho, que acompanha a rolagem da página (só existe enquanto a pessoa rola). */
.cab__progresso{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--nq-text);transform-origin:0 50%;transform:scaleX(0);opacity:0;pointer-events:none}
@supports (animation-timeline:scroll()){
  .cab__progresso{animation:progresso linear both;animation-timeline:scroll(root)}
  .cab.is-solido .cab__progresso{opacity:1}
}
@keyframes progresso{to{transform:scaleX(1)}}

/* ---------- home: o topo sobe ao sair, a faixa de letras corre com a rolagem ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hero-kj{animation:hero-sai linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
}
@keyframes hero-sai{to{translate:0 -40%}}
/* duas linhas em Anton, uma cheia e outra só no contorno, em sentidos opostos; paradas sem rolagem */
.faixa-letras{position:relative;padding-block:clamp(var(--nq-space-8),7vw,var(--nq-space-10));overflow:clip;background:var(--nq-sumi);color:var(--nq-text)}
.faixa-letras p{margin:0;white-space:nowrap;font:400 clamp(88px,15vw,240px)/.88 var(--font-sala);letter-spacing:-.01em;text-transform:uppercase}
.faixa-letras p [lang="ja"]{font:400 .8em/1 var(--font-kanji);color:var(--nq-kanji);letter-spacing:0}
.faixa-letras__oca{color:transparent;-webkit-text-stroke:2px var(--nq-text)}
.faixa-letras__oca [lang="ja"]{-webkit-text-stroke:0}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .faixa-letras p{animation:faixa-esq linear both;animation-timeline:view();animation-range:cover}
    .faixa-letras p.faixa-letras__oca{animation-name:faixa-dir}
  }
}
@keyframes faixa-esq{from{translate:4% 0}to{translate:-38% 0}}
@keyframes faixa-dir{from{translate:-38% 0}to{translate:4% 0}}

/* ---------- galeria: a prancha sob o cursor fica, as outras recuam ---------- */
.pc{transition:opacity var(--nq-dur-base) var(--nq-ease-tinta)}
@media (hover:hover) and (pointer:fine){.galeria:has(.pc:hover) .pc:not(:hover){opacity:.28}}
.galeria:has(.pc:focus-visible) .pc:not(:focus-visible){opacity:.28}

/* ---------- prancha: o desenho cresce de leve com a rolagem; a próxima prancha fecha a página ---------- */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){.pp__papel img{animation:pp-perto linear both;animation-timeline:scroll(root)}}
}
@keyframes pp-perto{to{scale:1.07}}
.seguinte{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--nq-space-6);padding:clamp(var(--nq-space-8),7vw,var(--nq-space-10)) var(--nq-gutter);text-decoration:none;overflow:clip}
@media (min-width:760px){.seguinte{padding-inline:var(--nq-gutter-wide)}}
.seguinte__txt{display:grid;gap:var(--nq-space-3)}
.seguinte__rot{font:400 clamp(24px,2.4vw,36px)/1 var(--font-sala);letter-spacing:.02em;text-transform:uppercase}
.seguinte__nome{font:400 clamp(72px,12vw,200px)/.9 var(--font-display);letter-spacing:-.03em;transition:color var(--nq-dur-fast) var(--nq-ease-tinta)}
.seguinte__nome .pc__kj{font-size:.42em;vertical-align:.5em}
.seguinte img{width:clamp(120px,22vw,340px);height:auto;aspect-ratio:4/5;object-fit:contain;transition:scale 640ms var(--nq-ease-tinta)}
.seguinte:hover .seguinte__nome,.seguinte:focus-visible .seguinte__nome{color:var(--nq-accent)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.seguinte:hover img{scale:1.05}}

/* ---------- quanto custa: a régua de cada faixa, em escala, desenhada quando entra ---------- */
.faixa__regua{position:relative;display:block;height:10px;margin-top:var(--nq-space-3);background:linear-gradient(90deg,var(--nq-text) 0 calc(var(--cm) / 35 * 100%),var(--nq-border) 0);transform-origin:0 50%;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100% / 35 - 2px),transparent 0 calc(100% / 35));mask:repeating-linear-gradient(90deg,#000 0 calc(100% / 35 - 2px),transparent 0 calc(100% / 35))}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){.faixa__regua{animation:regua linear both;animation-timeline:view();animation-range:entry 30% cover 45%}}
}
@keyframes regua{from{transform:scaleX(0)}}
.faixa__valor [data-conta]{font-variant-numeric:tabular-nums lining-nums}

/* ---------- cuidados: o fio dos 30 dias se desenha com a rolagem e cada marco se enche ao passar ---------- */
.tempo{border-left:0;position:relative}
.tempo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--nq-text);transform-origin:50% 0}
.tempo>li::before{left:-4px;background:var(--nq-bg);outline:1px solid var(--nq-text);outline-offset:-1px}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .tempo{view-timeline:--tempo block}
    .tempo::before{animation:fio linear both;animation-timeline:--tempo;animation-range:entry 40% exit 60%}
    .tempo>li::before{animation:marco linear both;animation-timeline:view();animation-range:entry 60% entry 100%}
  }
}
@supports not (animation-timeline:view()){.tempo>li::before{background:var(--nq-text)}}
@media (prefers-reduced-motion:reduce){.tempo>li::before{background:var(--nq-text)}}
@keyframes fio{from{transform:scaleY(0)}}
@keyframes marco{from{background:var(--nq-bg);scale:.6}to{background:var(--nq-text);scale:1.25}}

/* ---------- estúdio: do papel à pele, em painéis que correm na horizontal enquanto a página desce ----------
   Só com suporte a animação por rolagem, sem movimento reduzido e com largura de desktop; senão, a lista vertical. */
.processo{padding-block:clamp(var(--nq-space-9),8vw,var(--nq-space-10))}
.processo__cab{max-width:var(--nq-container);margin:0 auto var(--nq-space-8)}
.processo__trilho{display:grid;gap:var(--nq-space-8);list-style:none;margin:0 auto;padding:0;max-width:var(--nq-container)}
.etapa{display:grid;gap:var(--nq-space-4);align-content:start;padding-top:var(--nq-space-6);border-top:1px solid var(--nq-border)}
/* um caractere em pé ou vários empilhados: o bloco do kanji tem sempre a mesma altura */
.etapa__kj{--kj-alto:clamp(120px,14vw,220px);margin:0;font:400 calc(var(--kj-alto) / var(--n,1))/.9 var(--font-kanji);color:var(--nq-text);letter-spacing:-.04em}
.etapa__kj--v{writing-mode:vertical-rl;text-orientation:upright;line-height:1}
.etapa__kj{justify-self:start}
.etapa__nome{margin:0;font:400 clamp(44px,5vw,84px)/.95 var(--font-display);letter-spacing:-.02em;color:var(--nq-text)}
.etapa>p:not(.etapa__kj){margin:0;max-width:34ch;font-size:clamp(17px,1.4vw,21px);line-height:1.55;color:var(--nq-text-muted)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:900px){
    .processo{height:420svh;padding:0;view-timeline:--processo block}
    .processo__fixo{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto 1fr;padding-top:calc(72px + var(--nq-space-7));box-sizing:border-box;overflow:clip}
    .processo__cab{max-width:none;margin:0;padding-inline:max(var(--nq-gutter-wide),calc((100vw - var(--nq-container)) / 2))}
    .processo__trilho{display:flex;gap:var(--nq-space-9);max-width:none;width:max-content;align-items:center;padding-inline:max(var(--nq-gutter-wide),calc((100vw - var(--nq-container)) / 2));
      animation:trilho linear both;animation-timeline:--processo;animation-range:contain 0% contain 100%}
    .etapa{width:min(82vw,1040px);grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--nq-space-7);align-items:center;border-top:0;padding-top:0}
    .etapa__kj{justify-self:end}
    .etapa__kj{grid-row:1 / span 2;--kj-alto:clamp(220px,24vw,360px)}
    .etapa__nome{align-self:end}
    .etapa>p:not(.etapa__kj){align-self:start}
  }
}
@keyframes trilho{to{translate:calc(-100% + 100vw) 0}}

/* ---------- políticas: o sumário ocupa o lado vazio do topo ---------- */
.sumario{display:grid;gap:var(--nq-space-1);list-style:none;margin:0;padding:0;justify-self:end;text-align:right}
.sumario a{display:inline-flex;min-height:44px;align-items:center;justify-content:flex-end;text-decoration:none;font:400 clamp(28px,3vw,48px)/1 var(--font-sala);letter-spacing:.01em;text-transform:uppercase;color:var(--nq-text);transition:color var(--nq-dur-fast) var(--nq-ease-tinta)}
.sumario a:hover{color:var(--nq-accent)}
@media (max-width:759px){.sumario{justify-self:start;text-align:left}.sumario a{justify-content:flex-start;font-size:26px}}

/* ---------- o ritual (agendamento): o livro pousado na sala, sobre o kanji gigante ----------
   O orihon fica como foi aprovado; só a sala em volta é do site. A capa é o vermelho da tela: o kanji fica em washi,
   como marca d'água sob o livro inteiro (pedaços dele em volta da capa pareciam falha), e some quando o livro abre. */
.ritual-sala{position:relative;overflow:clip}
.ritual-sala .ori-sala{position:relative;background:transparent;max-width:var(--nq-container);padding-top:clamp(var(--nq-space-6),4vw,var(--nq-space-8))}
.ritual-sala .ori-sala__topo{position:relative;z-index:1;align-items:end}
.ritual-sala .sala__titulo{font-size:clamp(48px,6.4vw,104px);max-width:none}
.ritual-sala .sala__titulo em{color:inherit}
.ritual-sala .ori-sala__aviso{font-size:15px;line-height:1.55;color:var(--nq-text);max-width:38ch}
.ritual-sala .ori-sala__aviso strong{font:400 20px/1 var(--font-sala);letter-spacing:.02em;text-transform:uppercase;display:block;margin-bottom:var(--nq-space-2)}
.ritual-kj{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);z-index:0;--kj-tam:min(118svh,96vw);color:var(--nq-text);opacity:calc(var(--nq-op-marca-agua) * 1.6);
  transition:opacity var(--nq-dur-sala) var(--nq-ease-pincel),scale var(--nq-dur-sala) var(--nq-ease-pincel)}
.ritual-sala .ori-vista,.ritual-sala .ori-sala__abrir{position:relative;z-index:1}
.ritual-sala:has(#ori-abrir.is-saindo,#ori-abrir[hidden]) .ritual-kj{opacity:0;scale:.94}
@media (max-width:759px){.ritual-kj{top:62%;--kj-tam:96vw}}

/* ---------- o orihon na paleta do site ----------
   O livro desenha a borda das folhas, o contorno e a dobra com cores fixas no SVG (PAL em orihon.js: papel #E6DFD0,
   contorno #332E29, dobra #ADA496), que não são tokens. O CSS vence esses atributos sem tocar no código da peça;
   quando a peça for revista no sistema, a PAL deve passar a ler os tokens e estas regras saem. */
#ori-livro [fill="#E6DFD0"]{fill:var(--nq-washi)}
#ori-livro [stroke="#332E29"]{stroke:var(--nq-sumi)}
#ori-livro [fill="#332E29"]{fill:var(--nq-sumi)}
#ori-livro [stroke="#ADA496"]{stroke:color-mix(in srgb,var(--nq-sumi) 30%,var(--nq-washi))}
#ori-livro [fill="#ADA496"]{fill:color-mix(in srgb,var(--nq-sumi) 30%,var(--nq-washi))}
#ori-livro stop[stop-color="#E6DFD0"]{stop-color:var(--nq-washi)}

/* ---------- cabeçalho no desktop: logo à esquerda, salas no centro, o pedido à direita ---------- */
@media (min-width:900px){
  .cab__in{display:grid;grid-template-columns:1fr auto 1fr}
  .cab__nav{display:contents}
  .cab__salas{grid-column:2;justify-self:center}
  .cab__nav>.nq-btn{grid-column:3;justify-self:end}
}

/* ---------- quanto custa: a estimativa ----------
   No papel, de ponta a ponta. À esquerda a Régua do sistema; à direita a faixa em Anton e o valor, enormes, com o tique
   do sistema quando mudam. A tinta da régua é o vermelho da tela: o itálico do título fica na cor do texto. */
.estimador{padding-block:clamp(var(--nq-space-9),9vw,var(--nq-space-10))}
.estimador__in{display:grid;gap:var(--nq-space-8);align-items:center;max-width:var(--nq-container);margin-inline:auto}
@media (min-width:900px){.estimador__in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--nq-space-9)}}
.estimador__ctrl{display:grid;gap:var(--nq-space-7)}
.estimador .sala__titulo{font-size:clamp(44px,5.6vw,92px)}
.estimador .sala__titulo em{color:inherit}
.estimador__regua{margin:0;padding:0;border:0;min-width:0}
.estimador__saida{display:grid;gap:var(--nq-space-3);align-content:center}
.estimador__faixa{margin:0;font:400 clamp(64px,9vw,152px)/.86 var(--font-sala);letter-spacing:-.005em;text-transform:uppercase;color:var(--nq-text)}
.estimador__valor{display:grid;margin:0;font:400 clamp(72px,10vw,168px)/.9 var(--font-display);letter-spacing:-.035em;color:var(--nq-text);font-variant-numeric:lining-nums}
.estimador__valor span{display:inline-block}
.estimador__valor small{font:500 16px/1.4 var(--font-ui);letter-spacing:0;color:var(--nq-text-muted)}
.estimador__sessao{margin:0;font-size:18px;color:var(--nq-text-muted)}

/* as quatro faixas, em escala, numa linha só */
.faixas-sala{padding-block:clamp(var(--nq-space-8),7vw,var(--nq-space-10))}
.faixas-sala>.faixas{max-width:var(--nq-container);margin-inline:auto}
@media (min-width:1100px){.faixas-sala>.faixas{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* o que muda o preço: quatro kanji grandes, um par de palavras em cada */
.fatores__cab{margin-bottom:clamp(var(--nq-space-8),6vw,var(--nq-space-10))}
.fatores{display:grid;gap:var(--nq-space-9) var(--nq-space-8);list-style:none;margin:0;padding:0}
@media (min-width:760px){.fatores{grid-template-columns:repeat(2,minmax(0,1fr))}.fator:nth-child(even){translate:0 var(--nq-space-9)}}
.fator{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--nq-space-2) var(--nq-space-6);align-items:end}
.fator__kj{grid-row:1 / span 2;margin:0;font:400 clamp(110px,12vw,190px)/.88 var(--font-kanji);color:var(--nq-text);letter-spacing:-.04em}
.fator__kj--v{writing-mode:vertical-rl;text-orientation:upright;font-size:clamp(56px,6vw,95px);line-height:1}
.fator__nome{margin:0;font:400 clamp(34px,3.4vw,52px)/1 var(--font-sala);letter-spacing:.01em;text-transform:uppercase;color:var(--nq-text)}
.fator p:last-child{margin:0;max-width:30ch;line-height:1.55;color:var(--nq-text-muted)}

/* o sinal: o valor como cartaz, o texto ao lado */
.sinal{padding-block:clamp(var(--nq-space-9),10vw,calc(var(--nq-space-10) * 1.4));overflow:clip}
.sinal__in{display:grid;gap:var(--nq-space-7);align-items:center;max-width:var(--nq-container);margin-inline:auto}
@media (min-width:1000px){.sinal__in{grid-template-columns:auto minmax(0,1fr);gap:var(--nq-space-9)}}
.sinal__valor{margin:0;font:400 clamp(120px,19vw,320px)/.82 var(--font-display);letter-spacing:-.05em;color:var(--nq-text);white-space:nowrap}
.sinal__txt{display:grid;gap:var(--nq-space-5);justify-items:start}
.sinal__frase{margin:0;max-width:22ch;font:400 clamp(30px,3vw,46px)/1.08 var(--font-display);letter-spacing:-.015em;color:var(--nq-text)}
.sinal .nota{margin-top:var(--nq-space-5);width:100%}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sinal__valor{animation:sinal-entra linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  }
}
@keyframes sinal-entra{from{clip-path:inset(0 100% 0 0);translate:-4% 0}to{clip-path:inset(0 -2% 0 0);translate:0 0}}

/* ---------- cuidados: preparo, no dia, os 30 dias, evite, ajuda ---------- */
/* preparo: a conta grande do que já está feito ao lado da lista para marcar (a caixa de seleção do sistema) */
.preparo{display:grid;gap:var(--nq-space-8)}
@media (min-width:900px){.preparo{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--nq-space-9)}.preparo__cab{position:sticky;top:calc(72px + var(--nq-space-7));align-self:start}}
.preparo__cab{display:grid;gap:var(--nq-space-6);align-content:start}
.preparo__conta{margin:0;display:flex;align-items:baseline;gap:.08em;font:400 clamp(120px,15vw,240px)/.8 var(--font-sala);color:var(--nq-text);font-variant-numeric:tabular-nums}
.preparo__conta b{font-weight:400;display:inline-block}
.preparo__conta span{font-size:.36em;color:var(--nq-text-muted)}
.preparo__pronto{margin:0;font:400 clamp(26px,2.6vw,38px)/1.1 var(--font-display);color:var(--nq-text)}
.preparo__lista{display:grid;margin:0;padding:0;border:0;min-width:0}
.preparo__item{padding-block:var(--nq-space-5);border-top:1px solid var(--nq-border);align-items:start}
.preparo__item:last-child{border-bottom:1px solid var(--nq-border)}
.preparo__item>span:last-child{display:grid;gap:var(--nq-space-1);font:400 clamp(24px,2.2vw,32px)/1.15 var(--font-display);color:var(--nq-text);transition:opacity var(--nq-dur-base) var(--nq-ease-tinta)}
.preparo__item>span:last-child small{font:400 16px/1.55 var(--font-ui);color:var(--nq-text-muted);max-width:44ch}
.preparo__item:has(input:checked)>span:last-child{opacity:.45}

/* no dia: três colunas, título em Anton */
.nodia{padding-block:0 clamp(var(--nq-space-9),9vw,var(--nq-space-10))}
.nodia .sala__nome{margin-bottom:var(--nq-space-7)}
.nodia__lista{display:grid;gap:var(--nq-space-7);list-style:none;margin:0;padding:0}
@media (min-width:760px){.nodia__lista{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nodia__lista li{display:grid;gap:var(--nq-space-3);align-content:start;padding-top:var(--nq-space-5);border-top:2px solid var(--nq-text)}
.nodia__lista h3{margin:0;font:400 clamp(30px,2.8vw,44px)/1 var(--font-sala);letter-spacing:.01em;text-transform:uppercase;color:var(--nq-text)}
.nodia__lista p{margin:0;line-height:1.6;color:var(--nq-text-muted)}

/* os 30 dias: o dia de agora, enorme, preso ao lado do fio */
.dias{display:grid;gap:var(--nq-space-8)}
@media (min-width:900px){.dias{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--nq-space-9)}.dias__fixo{position:sticky;top:calc(72px + var(--nq-space-7));align-self:start}}
.dias__fixo{display:grid;gap:var(--nq-space-7);align-content:start}
.dias__agora{margin:0;max-width:7ch;font:400 clamp(64px,8vw,132px)/.86 var(--font-sala);text-transform:uppercase;color:var(--nq-text)}
@media (max-width:899px){.dias__agora{display:none}}
.dias .tempo>li{padding-bottom:clamp(var(--nq-space-8),12vh,var(--nq-space-10))}

/* evite: as palavras em Anton, riscadas por um traço de tinta vermelha que corre com a rolagem */
.evite__tit{margin-bottom:var(--nq-space-7)}
.evite{display:grid;gap:var(--nq-space-4);list-style:none;margin:0;padding:0}
.evite li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--nq-space-2) var(--nq-space-6)}
.evite__palavra{position:relative;font:400 clamp(64px,10vw,168px)/.92 var(--font-sala);letter-spacing:-.005em;text-transform:uppercase;color:var(--nq-text)}
.evite__palavra::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.09em;background:var(--nq-accent-fill);rotate:-2deg;transform-origin:0 50%;
  clip-path:polygon(0 30%,4% 0,100% 20%,97% 100%,3% 80%)}
.evite__txt{max-width:28ch;line-height:1.5;color:var(--nq-text-muted)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){.evite__palavra::after{animation:risca linear both;animation-timeline:view();animation-range:entry 70% cover 45%}}
}
@keyframes risca{from{transform:scaleX(0)}}

/* ajuda: a frase como cartaz */
.ajuda__in{display:grid;gap:var(--nq-space-7);justify-items:start}
.ajuda__frase{margin:0;max-width:16ch;font:400 clamp(48px,6.4vw,108px)/.98 var(--font-display);letter-spacing:-.025em;color:var(--nq-text)}
.ajuda__frase em{font-style:italic;color:var(--nq-accent)}