/* =========================================================
   AURIFEX STUDIO v9 (antes Sentinel v8, 09/10/2026) :: páginas
   1. Início: abertura com o palco dos projetos, serviços,
      relógio de 24 horas, índice de projetos e etapas.
   2. Peças das páginas internas.
   3. Acertos nas demonstrações trazidas da v7 (css/demos.css).
   ========================================================= */
:root{--bolha-n:#1F3A2A;--bolha-n-t:#DDEFE3;--janela-t:#A3A9B8}
html[data-tom="claro"]{--bolha-n:#D2ECD8;--bolha-n-t:#1C3825}

/* ---------- peças comuns: moldura de computador, celular, balões e botões de controle ---------- */
.janela-pc{border:1px solid var(--moldura-fio);border-radius:8px;overflow:hidden;background:var(--moldura);box-shadow:var(--sombra-peca)}
.janela-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;height:30px;padding:0 12px;font-size:12px;color:var(--janela-t);white-space:nowrap}
.janela-topo span:first-child{overflow:hidden;text-overflow:ellipsis}
.janela-video{position:relative;aspect-ratio:16/10;background:#000}
.janela-video img,.janela-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease}
.janela-video video{opacity:0}
.janela-video video.on{opacity:1}
.mini-barra{display:flex;align-items:center;gap:7px;height:22px;padding:0 9px;font-size:10.5px;color:var(--janela-t);background:var(--moldura)}
.mini-barra i{width:6px;height:6px;border-radius:50%;background:#6CC07A;flex:none}
.mini-barra b{font-weight:500;white-space:nowrap}
.bolha{display:block;max-width:86%;padding:8px 11px;border-radius:10px;font-size:13.5px;line-height:1.42}
.bolha small{display:block;font-size:10.5px;margin-top:3px;text-align:right;opacity:.72}
.bolha.deles{align-self:flex-start;background:var(--cartao-2);border:1px solid var(--linha);border-bottom-left-radius:2px;color:var(--texto)}
.bolha.nossa{align-self:flex-end;background:var(--bolha-n);color:var(--bolha-n-t);border-bottom-right-radius:2px}
.bolha.digitando{display:inline-flex;gap:4px;padding:12px 14px}
.bolha.digitando i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45}
html.mov .bolha.digitando i{animation:pontinho 1.1s ease-in-out infinite}
html.mov .bolha.digitando i:nth-child(2){animation-delay:.15s}
html.mov .bolha.digitando i:nth-child(3){animation-delay:.3s}
@keyframes pontinho{0%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
.controles{display:flex;align-items:center;gap:6px}
.controles button{width:34px;height:34px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:transparent;display:grid;place-items:center;cursor:pointer;transition:border-color .2s}
.controles button:hover{border-color:var(--ouro)}
.controles button svg{width:11px;height:11px;fill:var(--texto)}
html:not(.mov) .controles .so-mov{display:none}

/* =========================================================
   1. INÍCIO
   ========================================================= */
.capa{position:relative;padding-block:clamp(20px,4svh,56px) 0;overflow:hidden}
.capa-guias{position:absolute;inset:0;max-width:1240px;margin:0 auto;padding-inline:clamp(18px,4.2vw,56px);display:flex;justify-content:space-between;pointer-events:none}
.capa-guias i{width:1px;background:var(--linha);opacity:.55;transform-origin:top}
.capa-grade{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(22px,3vw,44px);align-items:center}
.capa-texto{display:grid;gap:clamp(12px,2.2svh,22px);justify-items:start}
.capa h1{font-size:clamp(40px,min(4.3vw,8.8svh),66px)}
.capa h1 .l{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.capa h1 .l i{display:block;font-style:normal}
.capa .lead{color:var(--texto-2);font-size:clamp(16px,1.2vw,17.5px);line-height:1.55;max-width:47ch}
.provas{list-style:none;margin:2px 0 0;padding:14px 0 0;border-top:1px solid var(--linha);width:100%;display:grid;gap:5px;font-size:14.5px;color:var(--texto-2)}
.provas li{display:flex;align-items:center;gap:10px}
.provas .icone{width:16px;height:16px;color:var(--ouro);stroke-width:2}
/* o palco: o mesmo projeto no computador e no celular, lado a lado, em sincronia (13/10/2026).
   Antes o celular ficava por cima do canto do monitor; agora nada cobre a tela, e os dois
   mostram a mesma cena no mesmo instante. A altura da janela manda no tamanho. */
.palco{width:min(58vw,720px,max(400px,calc((100svh - var(--topo-a) - 230px) * 1.9)));justify-self:end;display:grid;gap:12px}
.palco-cena{position:relative;display:flex;align-items:flex-end;gap:clamp(10px,2.2%,20px);padding-bottom:10px}
.palco-cena::after{content:"";position:absolute;left:-4%;right:-4%;bottom:0;height:1px;background:var(--linha-forte)}
@media (max-width:640px){.palco-cena::after{display:none}.palco-cena{padding-bottom:0}}
.palco .janela-pc{flex:1 1 auto;min-width:0}
.cel{position:relative;flex:0 0 21.5%;min-width:92px;border-radius:22px;padding:5px;background:var(--moldura);box-shadow:0 0 0 1px var(--moldura-fio),0 26px 44px -18px rgba(0,0,0,.78)}
.cel-tela{position:relative;aspect-ratio:390/810;border-radius:17px;overflow:hidden;background:#000}
.cel-tela img,.cel-tela video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .5s ease}
.cel-tela video{opacity:0}
.cel-tela video.on{opacity:1}
.cel-ilha{position:absolute;top:10px;left:50%;width:30%;height:9px;transform:translateX(-50%);background:#000;border-radius:5px;z-index:2}
.palco-cena.trocando .janela-video > *,.palco-cena.trocando .cel-tela > *{opacity:0}
.cel-tocar{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:0;border-radius:var(--raio);background:var(--ouro);color:var(--sobre-ouro);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.cel-tocar svg{width:10px;height:10px;fill:currentColor}
.palco-pe{display:flex;align-items:center;gap:12px;min-height:34px}
.palco-legenda{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;font-size:15px;font-weight:500;color:var(--texto);transition:opacity .25s ease}
.palco-legenda.troca{opacity:0}
.palco-legenda b{font:500 17px/1 var(--serif);color:var(--ouro)}
.palco-legenda span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palco-caps{display:flex;gap:2px}
.palco-caps button{width:20px;height:24px;border:0;padding:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.palco-caps button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--linha-forte);transition:background .3s,transform .3s}
.palco-caps button:hover::before{background:var(--texto-2)}
.palco-caps button[aria-pressed="true"]::before{background:var(--ouro);transform:scale(1.35)}
.palco-trilho{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.palco-trilho button{position:relative;display:grid;gap:3px;text-align:left;border:0;background:transparent;padding:11px 0 0;cursor:pointer;color:var(--texto-3);min-width:0;transition:color .3s}
.palco-trilho .fio{position:absolute;left:0;right:0;top:0;height:2px;background:var(--linha)}
.palco-trilho .fio i{display:block;height:100%;background:var(--ouro);transform-origin:left;transform:scaleX(0)}
.palco-trilho b{font:600 14.5px/1.2 var(--display);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palco-trilho small{font-size:12px;line-height:1.3;color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palco-trilho button:hover,.palco-trilho button[aria-pressed="true"]{color:var(--texto)}
.palco-trilho button.feito .fio i{transform:scaleX(1)}
/* faixa dos ramos: anda devagar e para quando o mouse chega; no toque, desliza com o dedo */
.ramos{margin-top:clamp(26px,4.6svh,52px);border-block:1px solid var(--linha);overflow:hidden}
.ramos-pista{display:flex;width:max-content;padding-block:13px}
.ramos-pista span{position:relative;font-size:15px;color:var(--texto-3);white-space:nowrap;padding-inline:22px}
.ramos-pista span::before{content:"";position:absolute;left:-2px;top:50%;width:4px;height:4px;margin-top:-2px;background:var(--linha-forte);transform:rotate(45deg)}
.ramos-pista .seu{color:var(--ouro)}
html.mov .ramos-pista{animation:ramos 70s linear infinite}
html.mov .ramos:hover .ramos-pista{animation-play-state:paused}
@keyframes ramos{to{transform:translateX(-50%)}}
html:not(.mov) .ramos{overflow-x:auto;scrollbar-width:none}
html:not(.mov) .ramos::-webkit-scrollbar{display:none}
@media (max-width:1020px){
  .capa-grade{grid-template-columns:1fr;gap:28px}
  .palco{width:min(100%,640px);justify-self:start}
  .capa h1{font-size:clamp(40px,8.6vw,64px)}
}
@media (max-width:640px){
  /* no celular, o projeto aparece só no celular: o aparelho no centro, a lista embaixo */
  .palco .janela-pc{display:none}
  .palco-cena{display:grid;justify-items:center;padding:0}
  .cel{width:min(58%,230px)}
  .palco-pe{justify-content:center;text-align:center}
  .palco-legenda{justify-content:center}
  .palco-legenda span{white-space:normal}
  .palco-trilho{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
  .capa .acoes{width:100%}
  .capa .acoes .botao{flex:1 1 auto}
}

/* serviços */
.servicos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linha)}
.servico{display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;justify-items:start;align-content:start;padding:26px clamp(18px,2.2vw,30px) 6px}
.servico + .servico{border-left:1px solid var(--linha)}
.servico:first-child{padding-left:0}
.servico:last-child{padding-right:0}
.servico h3{font-size:22px}
.servico > p{color:var(--texto-2);font-size:15.5px;line-height:1.55;max-width:38ch}
.servico-peca{width:100%;height:200px;margin-bottom:8px;display:grid;place-items:center;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:20px;overflow:hidden}
.mini-janela{width:min(84%,270px);border:1px solid var(--moldura-fio);border-radius:6px;overflow:hidden;background:var(--moldura);box-shadow:var(--sombra-peca)}
.mini-tela{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.mini-tela img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.mini-tela img:first-child{opacity:1}
html.mov .peca-site .mini-tela img{opacity:0;animation:passa 16s linear infinite backwards}
html.mov .peca-site .mini-tela img:nth-child(2){animation-delay:4s}
html.mov .peca-site .mini-tela img:nth-child(3){animation-delay:8s}
html.mov .peca-site .mini-tela img:nth-child(4){animation-delay:12s}
@keyframes passa{0%{opacity:0}5%,25%{opacity:1}30%,100%{opacity:0}}
.peca-conversa{display:flex;flex-direction:column;justify-content:center;gap:9px;place-items:normal}
html.mov .servico.revela:not(.visto) .bolha{opacity:0;transform:translateY(10px)}
html.mov .servico .bolha{transition:opacity .5s ease .5s,transform .6s var(--curva) .5s}
html.mov .servico .bolha.nossa{transition-delay:1.5s}
.peca-relatorio{place-items:stretch;align-content:space-between;gap:10px}
.mini-num{display:grid;gap:2px}
.mini-num b{font:500 46px/1 var(--serif);font-variation-settings:"opsz" 60}
.mini-num small{font-size:12.5px;color:var(--texto-3)}
.peca-relatorio svg{display:block;width:100%;height:auto;overflow:visible}
.peca-relatorio .eixo{stroke:var(--linha);fill:none}
.peca-relatorio .curva{fill:none;stroke:var(--ouro);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1 1}
.peca-relatorio circle{fill:var(--ouro)}
html.mov .servico.revela:not(.visto) .curva{stroke-dashoffset:1}
html.mov .servico .curva{transition:stroke-dashoffset 1.5s cubic-bezier(.45,0,.2,1) .5s}
html.mov .servico.revela:not(.visto) circle{opacity:0}
html.mov .servico circle{transition:opacity .4s ease 1.8s}
@media (max-width:760px){
  .servicos{border-top:0}
  .servico,.servico:first-child,.servico:last-child{padding:0 0 4px}
  .servico + .servico{border-left:0}
}

/* um dia de exemplo: o relógio de 24 horas nasce do logo (o círculo e o facho) */
.dia{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(28px,5.4vw,84px);align-items:center}
.relogio{position:relative;width:100%;max-width:420px;aspect-ratio:1;justify-self:center;--q:var(--verde)}
.relogio svg{display:block;width:100%;height:100%;overflow:visible}
.relogio-centro{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;pointer-events:none}
.relogio-centro b{font:500 clamp(40px,4.6vw,56px)/1 var(--serif);font-variation-settings:"opsz" 72}
.relogio-centro span{font-size:13.5px;font-weight:600;color:var(--q);transition:color .5s}
.r-aro{fill:none;stroke:var(--linha-forte);stroke-width:1}
.r-aberto{fill:none;stroke:var(--texto-2);stroke-width:2.5;stroke-linecap:round}
.r-tique{stroke:var(--linha-forte);stroke-width:1}
.r-tique.g{stroke:var(--texto-3);stroke-width:1.4}
.r-num{font:500 12.5px var(--texto-f);fill:var(--texto-3);text-anchor:middle;dominant-baseline:central}
.r-rot{font:500 11px var(--texto-f);fill:var(--texto-3);text-anchor:middle}
.r-giro{transform-box:view-box;transform-origin:220px 220px}
html.mov .r-giro{transition:transform 1.2s var(--curva)}
.r-feixe{fill:var(--q);opacity:.15;transition:fill .5s}
.r-fio{stroke:var(--q);stroke-width:1.5;stroke-linecap:round;transition:stroke .5s}
.r-eixo{fill:var(--q);transition:fill .5s}
.r-ponto{cursor:pointer;transition:opacity .3s}
.r-ponto .alvo{fill:transparent}
.r-ponto .p{fill:var(--fundo-2);stroke:var(--pq);stroke-width:2;r:6px;transition:r .35s var(--curva),fill .3s}
.r-ponto:hover .p{r:8px}
.r-ponto.on .p{fill:var(--pq);r:9.5px}
.r-ponto.fora{opacity:.25}
.r-ponto:focus-visible{outline:none}
.r-ponto:focus-visible .p{stroke:var(--texto);stroke-width:3}
.dia-lado{display:grid;gap:16px;min-width:0}
.dia-filtros{display:flex;flex-wrap:wrap;gap:8px}
.dia-filtros button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 13px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:transparent;font-size:13.5px;font-weight:600;color:var(--texto-2);cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.dia-filtros button i{width:8px;height:8px;border-radius:2px;background:var(--q)}
.dia-filtros button:hover{border-color:var(--texto-2)}
.dia-filtros button[aria-pressed="true"]{border-color:var(--texto);color:var(--texto);background:var(--cartao)}
.dia-cartao{--q:var(--verde);display:grid;gap:12px;align-content:start;min-height:268px;background:var(--cartao);border:1px solid var(--linha);border-left:3px solid var(--q);border-radius:var(--raio);padding:22px 24px 24px;transition:border-color .5s}
.dia-quem{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--q)}
.dia-quem .icone{width:18px;height:18px}
.dia-quem time{margin-left:auto;font:500 21px/1 var(--serif);color:var(--texto)}
.dia-cartao h3{font-size:clamp(21px,2vw,26px);font-weight:500;letter-spacing:-.028em}
.dia-cartao > p{color:var(--texto-2);font-size:15.5px;line-height:1.55;max-width:50ch}
.dia-mini{display:flex;flex-direction:column;margin-top:2px}
.dia-mini .faixa{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;border:1px solid var(--linha-forte);border-radius:var(--raio);padding:8px 12px;font-size:13.5px;font-weight:600;background:var(--fundo)}
.dia-mini .faixa i{width:8px;height:8px;border-radius:50%;background:var(--vermelho)}
.dia-mini .faixa.tres{gap:0;padding:0;overflow:hidden}
.dia-mini .faixa.tres span{padding:8px 14px}
.dia-mini .faixa.tres span + span{border-left:1px solid var(--linha-forte)}
html.mov .dia-cartao.entrou > *{animation:surgir .5s var(--curva) both;animation-delay:calc(var(--i,0) * 70ms)}
.dia-controles{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--texto-3)}
.dia-controles button{width:34px;height:34px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:transparent;display:grid;place-items:center;cursor:pointer;transition:border-color .2s}
.dia-controles button:hover{border-color:var(--ouro)}
.dia-controles button svg{width:11px;height:11px;fill:var(--texto)}
.dia-controles #dia-conta{margin-left:8px}
.dia-controles .dica{margin-left:auto;transition:opacity .6s}
.dia-controles .dica.some{opacity:0}
html:not(.mov) #dia-pausa,html:not(.mov) #pal-pausa{display:none}
.palco-controles{display:flex;gap:6px}
.palco-controles button{width:34px;height:34px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:transparent;display:grid;place-items:center;cursor:pointer;transition:border-color .2s}
.palco-controles button:hover{border-color:var(--ouro)}
.palco-controles button svg{width:11px;height:11px;fill:var(--texto)}
@media (max-width:900px){
  .dia{grid-template-columns:1fr;gap:22px}
  .relogio{max-width:300px}
  .dia-filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(clamp(18px,4.2vw,56px) * -1);padding-inline:clamp(18px,4.2vw,56px)}
  .dia-filtros::-webkit-scrollbar{display:none}
  .dia-cartao{min-height:290px}
  .dia-controles .dica{display:none}
}

/* índice de projetos: a lista manda na prévia ao lado */
.indice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(24px,4.4vw,72px);align-items:center}
.indice-lista{margin:0;padding:0;list-style:none;border-top:1px solid var(--linha-forte)}
.indice-lista a{display:grid;grid-template-columns:34px minmax(0,1fr) auto 22px;gap:2px 14px;align-items:center;padding:19px 4px 19px 0;border-bottom:1px solid var(--linha);text-decoration:none;transition:padding .45s var(--curva)}
.indice-lista img{display:none}
.indice-lista .n{grid-row:1/span 2;align-self:start;margin-top:5px;font:500 17px/1 var(--serif);color:var(--texto-3)}
.indice-lista b{grid-column:2;font:500 clamp(24px,2.5vw,34px)/1.08 var(--display);letter-spacing:-.035em;transition:color .25s}
.indice-lista .t{grid-column:2;grid-row:2;font-size:14.5px;color:var(--texto-3)}
.indice-lista .s{grid-column:3;grid-row:1/span 2;font-size:13px;color:var(--texto-3);white-space:nowrap;text-align:right}
.indice-lista .seta{grid-column:4;grid-row:1/span 2;width:20px;height:20px;fill:none;stroke:var(--texto-3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--curva),stroke .25s}
.indice-lista a:hover,.indice-lista a.ativo{padding-left:12px}
.indice-lista a:hover b,.indice-lista a.ativo b{color:var(--ouro)}
.indice-lista a:hover .seta,.indice-lista a.ativo .seta{transform:translateX(4px);stroke:var(--ouro)}
.indice-previa .janela-pc{transition:transform .5s var(--curva)}
.indice > .pontos{grid-column:1/-1}
@media (max-width:900px){
  .indice{grid-template-columns:1fr}
  .indice-previa{display:none}
}
@media (max-width:760px){
  .indice-lista{border-top:0}
  .indice-lista a,.indice-lista a:hover,.indice-lista a.ativo{grid-template-columns:auto minmax(0,1fr) 20px;gap:2px 10px;padding:0 0 14px;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;background:var(--cartao)}
  .indice-lista img{display:block;grid-column:1/-1;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin-bottom:12px}
  .indice-lista .n{grid-row:auto;margin:0 0 0 14px;align-self:baseline}
  .indice-lista b{grid-column:2;font-size:22px}
  .indice-lista .t{grid-column:2;grid-row:auto}
  .indice-lista .s{grid-column:2;grid-row:auto;text-align:left}
  .indice-lista .seta{grid-column:3;grid-row:2/span 3;margin-right:14px;align-self:center}
}

/* etapas resumidas (também usadas nas automações) */
.passos{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--linha-forte)}
.passos.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.passo{display:grid;gap:10px;align-content:start;padding:22px 22px 4px 0}
.passo + .passo{padding-left:22px;border-left:1px solid var(--linha)}
.passo .n{font:500 36px/1 var(--serif);color:var(--ouro)}
.passo h3{font-size:19.5px}
.passo p{color:var(--texto-2);font-size:15px;line-height:1.55}
@media (max-width:1000px) and (min-width:761px){.passos{grid-template-columns:repeat(2,minmax(0,1fr))}.passo{padding-bottom:22px}.passo:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--linha)}.passo:nth-child(4){border-top:1px solid var(--linha)}.passos.tres{grid-template-columns:repeat(3,minmax(0,1fr))}.passos.tres .passo:nth-child(3){padding-left:22px;border-left:1px solid var(--linha);border-top:0}}
@media (max-width:760px){
  .passos{border-top:0}
  .passo,.passo + .passo{padding:18px 18px 20px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--cartao)}
}

/* abertura da página inicial: tudo entra em cascata (só com movimento) */
html.mov .capa .entra{animation:surgir .9s var(--curva) both;animation-delay:calc(.45s + var(--e,0) * .12s)}
html.mov .capa h1 .l i{animation:sobe 1.05s var(--curva) both}
html.mov .capa h1 .l:nth-child(2) i{animation-delay:.09s}
html.mov .capa h1 .l:nth-child(3) i{animation-delay:.18s}
html.mov .capa h1 .l:nth-child(4) i{animation-delay:.27s}
@keyframes sobe{from{transform:translateY(110%)}}
html.mov .capa-guias i{animation:guia 1.5s var(--curva) both}
html.mov .capa-guias i:nth-child(2){animation-delay:.08s}
html.mov .capa-guias i:nth-child(3){animation-delay:.16s}
html.mov .capa-guias i:nth-child(4){animation-delay:.24s}
html.mov .capa-guias i:nth-child(5){animation-delay:.32s}
@keyframes guia{from{transform:scaleY(0)}}

/* =========================================================
   2. PÁGINAS INTERNAS
   ========================================================= */
/* Recursos: três janelas com peças de verdade dos projetos */
.pilha-janelas{position:relative;width:100%;max-width:540px;aspect-ratio:1.5;justify-self:end}
.pj{position:absolute;width:64%;border:1px solid var(--moldura-fio);border-radius:6px;overflow:hidden;background:var(--moldura);box-shadow:var(--sombra-peca)}
.pj::before{content:"";display:block;height:13px}
.pj img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.pj.j1{left:0;top:0}
.pj.j2{right:0;top:20%}
.pj.j3{left:13%;bottom:0}
html.mov .pj{animation:surgir .9s var(--curva) both}
html.mov .pj.j2{animation-delay:.14s}
html.mov .pj.j3{animation-delay:.28s}
/* Projetos: os quatro sites no celular */
.leque{display:flex;justify-content:flex-end;align-items:flex-end;gap:clamp(8px,1.2vw,16px);padding-top:22px}
.cel-mini{width:22%;max-width:124px;border-radius:17px;padding:4px;background:var(--moldura);box-shadow:0 0 0 1px var(--moldura-fio),var(--sombra-peca)}
.cel-mini img{width:100%;height:auto;aspect-ratio:390/810;object-fit:cover;object-position:top;border-radius:13px}
.cel-mini:nth-child(odd){transform:translateY(-22px)}
html.mov .cel-mini{animation:surgir .9s var(--curva) both}
html.mov .cel-mini:nth-child(2){animation-delay:.1s}
html.mov .cel-mini:nth-child(3){animation-delay:.2s}
html.mov .cel-mini:nth-child(4){animation-delay:.3s}
/* Como trabalhamos: a proposta em papel */
.folha-pilha{position:relative;width:min(100%,370px);justify-self:end;margin:10px 26px 10px 0}
.folha{position:relative;display:grid;gap:14px;background:#FBF9F4;color:#1A2133;border-radius:3px;padding:30px 30px 26px;box-shadow:0 34px 54px -34px rgba(0,0,0,.75),0 6px 14px -8px rgba(0,0,0,.35);transform:rotate(-1.4deg)}
.folha.atras{position:absolute;inset:0;background:#E7E1D4;transform:rotate(2.4deg) translate(12px,8px)}
.folha-marca{font:500 15px/1 var(--serif);letter-spacing:.05em;color:#7A6A45}
.folha b{font:500 34px/1 var(--display);letter-spacing:-.035em}
.folha-l{display:flex;align-items:baseline;gap:8px;font-size:14.5px}
.folha-l span{color:#5B6274}
.folha-l i{flex:1;border-bottom:1px dotted #B5AE9C;transform:translateY(-3px)}
.folha-l em{font-style:normal;font-weight:600}
.folha-ass{display:flex;align-items:center;gap:9px;margin-top:6px;padding-top:14px;border-top:1px solid #D9D2C2;font-size:13.5px;font-weight:600;color:#226B46}
.folha-ass .icone{width:18px;height:18px;stroke-width:2.2}
html.mov .folha-pilha .folha:not(.atras){animation:pousa 1s var(--curva) .15s both}
@keyframes pousa{from{opacity:0;transform:rotate(-5deg) translateY(-22px)}}
@media (max-width:900px){.pilha-janelas,.leque,.folha-pilha{justify-self:start}.leque{justify-content:flex-start}.folha-pilha{margin-right:0}}

/* Recursos: as demonstrações em abas, uma por vez */
.bancada-abas{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px;margin-bottom:clamp(22px,3vw,36px);background:var(--cartao);border:1px solid var(--linha-forte);border-radius:var(--raio)}
.bancada-abas button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 10px;border:0;border-radius:4px;background:transparent;font:600 14.5px/1.1 var(--texto-f);color:var(--texto-3);cursor:pointer;white-space:nowrap;transition:color .3s}
.bancada-abas button:hover{color:var(--texto)}
.bancada-abas button[aria-selected="true"]{color:var(--sobre-ouro)}
.bancada-abas .icone{width:18px;height:18px}
.bancada-abas .marcador{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 4);border-radius:4px;background:var(--ouro);transform:translateX(calc(var(--k,0) * 100%));transition:transform .5s var(--curva)}
.bancada-painel .funcao{border-top:0;padding-block:0}
.bancada-painel .texto-f{position:static}
html.mov .bancada-painel:not([hidden]){animation:surgir .5s var(--curva)}
@media (max-width:640px){
  .bancada-abas{display:flex;overflow-x:auto;scrollbar-width:none}
  .bancada-abas::-webkit-scrollbar{display:none}
  .bancada-abas .marcador{display:none}
  .bancada-abas button{flex:none;padding:0 14px}
  .bancada-abas button[aria-selected="true"]{background:var(--ouro)}
}

/* Automações: a conversa de exemplo */
.conversa-demo{display:grid;gap:12px;width:100%;max-width:470px;justify-self:end}
.conversa-abas{display:flex;flex-wrap:wrap;gap:6px}
.conversa-abas button{min-height:36px;padding:0 12px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:transparent;font-size:13.5px;font-weight:600;color:var(--texto-2);cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.conversa-abas button:hover{border-color:var(--texto-2)}
.conversa-abas button[aria-pressed="true"]{background:var(--ouro);border-color:var(--ouro);color:var(--sobre-ouro)}
.conversa{border:1px solid var(--linha-forte);border-radius:10px;overflow:hidden;background:var(--fundo-2);box-shadow:var(--sombra-peca)}
.conversa-topo{display:flex;align-items:center;gap:11px;padding:10px 14px;background:var(--cartao-2);border-bottom:1px solid var(--linha)}
.conversa-topo .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ouro);color:var(--sobre-ouro);font-size:12.5px;font-weight:700;flex:none}
.conversa-topo b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.conversa-topo small{display:block;font-size:12px;color:var(--texto-3)}
.conversa-corpo{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;height:404px;padding:14px;overflow:hidden}
.conversa-corpo .hora{align-self:center;font-size:11.5px;font-weight:600;color:var(--texto-3);background:var(--cartao);border:1px solid var(--linha);border-radius:4px;padding:3px 9px}
.conversa-corpo .bolha small b{font-weight:700}
.conversa-corpo .bolha u{text-decoration:underline;text-underline-offset:2px}
html.mov .conversa-corpo > *{animation:subirBalao .45s var(--curva) both}
@keyframes subirBalao{from{opacity:0;transform:translateY(10px) scale(.97)}}
.conversa-pe{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.conversa-nota{font-size:13.5px;color:var(--texto-3);line-height:1.45}
.conversa-repetir{flex:none;border:0;background:transparent;padding:0;color:var(--ouro);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
html:not(.mov) .conversa-repetir{display:none}
@media (max-width:900px){.conversa-demo{justify-self:start}}
@media (max-width:640px){.conversa-abas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(clamp(18px,4.2vw,56px) * -1);padding-inline:clamp(18px,4.2vw,56px)}.conversa-abas::-webkit-scrollbar{display:none}.conversa-abas button{flex:none}}
.autos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linha);border-left:1px solid var(--linha)}
.auto-item{display:grid;gap:10px;align-content:start;padding:26px 24px 28px;border-right:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.auto-item .icone{width:26px;height:26px;color:var(--ouro)}
.auto-item h3{font-size:19.5px}
.auto-item p{color:var(--texto-2);font-size:15px;line-height:1.55}
@media (max-width:1000px) and (min-width:761px){.autos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.autos{border:0}.auto-item{border:1px solid var(--linha);border-radius:var(--raio);background:var(--cartao);padding:20px 18px 22px}}
.dois-lados{display:grid;grid-template-columns:1fr 1fr;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio)}
.dl-lado{padding:clamp(20px,3vw,34px);--q:var(--verde)}
.dl-lado + .dl-lado{border-left:1px solid var(--linha);--q:var(--azul)}
.dl-lado h3{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.dl-lado h3 i{width:10px;height:10px;border-radius:2px;background:var(--q)}
.dl-lado ul{margin:0;padding:0;list-style:none;display:grid;gap:12px;font-size:15.5px;color:var(--texto-2)}
.dl-lado li{display:flex;align-items:flex-start;gap:11px}
.dl-lado .icone{width:18px;height:18px;margin-top:3px;color:var(--q)}
@media (max-width:760px){.dois-lados{grid-template-columns:1fr}.dl-lado + .dl-lado{border-left:0;border-top:1px solid var(--linha)}}

/* Como trabalhamos: cada etapa com a peça de verdade que ela produz */
.etapas{margin:0;padding:0;list-style:none;display:grid;border-top:1px solid var(--linha)}
.etapa{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center;padding-block:clamp(24px,3.4vw,42px);border-bottom:1px solid var(--linha)}
.etapa:nth-child(even) .etapa-peca{order:2}
.etapa-peca{display:grid;place-items:center;min-height:236px;padding:26px;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio)}
.etapa-texto{display:grid;gap:12px;justify-items:start;max-width:54ch}
.etapa-texto .n{font:500 42px/1 var(--serif);color:var(--ouro)}
.etapa-texto h3{font-size:clamp(23px,2.2vw,29px);font-weight:500;letter-spacing:-.03em}
.etapa-texto p{color:var(--texto-2);font-size:16px}
.etapa-texto .voce{width:100%;font-size:14.5px;color:var(--texto-3);border-top:1px solid var(--linha);padding-top:12px}
.etapa-texto .voce b{color:var(--texto);font-weight:600}
.m-conversa{display:flex;flex-direction:column;gap:8px;width:min(100%,340px)}
.m-analise{display:grid;gap:12px;width:min(100%,320px);background:var(--fundo);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 20px}
.m-analise b{font-size:15px;font-weight:600}
.m-analise p{display:grid;grid-template-columns:1fr 96px;align-items:center;gap:12px;font-size:13.5px;color:var(--texto-2)}
.m-analise i{position:relative;height:6px;border-radius:3px;background:var(--linha);overflow:hidden}
.m-analise i::after{content:"";position:absolute;inset:0;width:var(--v);background:var(--verde);border-radius:3px;transform-origin:left}
.m-analise i.ruim::after{background:var(--vermelho)}
.m-analise small{font-size:11.5px;color:var(--texto-3)}
html.mov .etapa.revela:not(.visto) .m-analise i::after{transform:scaleX(0)}
html.mov .etapa .m-analise i::after{transition:transform 1s var(--curva) .5s}
html.mov .etapa .m-analise p:nth-of-type(2) i::after{transition-delay:.62s}
html.mov .etapa .m-analise p:nth-of-type(3) i::after{transition-delay:.74s}
html.mov .etapa .m-analise p:nth-of-type(4) i::after{transition-delay:.86s}
.m-criacao{position:relative;width:min(88%,340px);border:1px solid var(--moldura-fio);border-radius:6px;background:var(--moldura);box-shadow:var(--sombra-peca)}
.m-criacao .mini-barra{border-radius:5px 5px 0 0}
.m-criacao .mini-tela{border-radius:0 0 5px 5px}
.pino-nota{position:absolute;display:inline-flex;align-items:center;gap:7px;background:#FBF9F4;color:#1A2133;font-size:12px;font-weight:600;padding:5px 10px;border-radius:4px;white-space:nowrap;box-shadow:0 10px 18px -8px rgba(0,0,0,.6)}
.pino-nota::before{content:"";width:8px;height:8px;border-radius:50%;background:#C8553D}
.pino-nota.ok::before{background:#2E8B57}
.pino-nota.p1{left:-18px;top:44%}
.pino-nota.p2{right:-16px;bottom:12%}
html.mov .etapa.revela:not(.visto) .pino-nota{opacity:0;transform:translateY(8px)}
html.mov .etapa .pino-nota{transition:opacity .5s ease .7s,transform .6s var(--curva) .7s}
html.mov .etapa .pino-nota.p2{transition-delay:1.5s}
.m-publicacao{display:grid;gap:14px;width:min(100%,310px)}
.m-publicacao .endereco{display:flex;align-items:center;gap:10px;background:var(--fundo);border:1px solid var(--linha-forte);border-radius:var(--raio);padding:11px 14px;font-size:15px;font-weight:500}
.m-publicacao .endereco .icone{width:16px;height:16px;color:var(--verde);stroke-width:2}
.m-publicacao .no-ar{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--verde)}
.m-publicacao .no-ar i{width:9px;height:9px;border-radius:50%;background:var(--verde)}
.m-publicacao ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--texto-2)}
.m-publicacao li{display:flex;align-items:center;gap:9px}
.m-publicacao li .icone{width:16px;height:16px;color:var(--ouro)}
@media (max-width:820px){.etapa{grid-template-columns:1fr;gap:18px}.etapa:nth-child(even) .etapa-peca{order:0}.etapa-peca{min-height:0;padding:22px 26px}}
.valor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,84px);align-items:center}
.valor .cabeca{margin-bottom:0}
.valor-lista{margin:0;padding:0;list-style:none;border-top:1px solid var(--linha)}
.valor-lista li{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--linha);font-size:15px;color:var(--texto-2)}
.valor-lista .icone{color:var(--ouro);margin-top:2px}
.valor-lista b{display:block;font-size:16.5px;font-weight:600;color:var(--texto)}
@media (max-width:900px){.valor{grid-template-columns:1fr}}
.entrega,.compromissos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,44px)}
.item-entrega,.compromisso{display:grid;gap:10px;align-content:start;padding:22px 0 28px;border-top:1px solid var(--linha)}
.item-entrega .icone,.compromisso .icone{width:26px;height:26px;color:var(--ouro)}
.item-entrega h3,.compromisso h3{font-size:19.5px}
.item-entrega p,.compromisso p{color:var(--texto-2);font-size:15px;line-height:1.55}
.compromisso.nao .icone{color:var(--texto-3)}
@media (max-width:900px){.entrega,.compromissos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.entrega,.compromissos{grid-template-columns:1fr}}
.depois{margin-top:clamp(20px,3vw,36px);background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:clamp(20px,3vw,32px)}
.depois h3{margin-bottom:16px}
.depois-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,44px)}
.depois-grade p{font-size:15px;color:var(--texto-2);line-height:1.55}
.depois-grade b{display:block;margin-bottom:4px;font-weight:600;color:var(--texto)}
@media (max-width:760px){.depois-grade{grid-template-columns:1fr}}

/* =========================================================
   3. ACERTOS NAS DEMONSTRAÇÕES TRAZIDAS DA V7
   O que denunciava "cara de IA" sai: brilho, halo, vidro fosco,
   itálico de enfeite e rótulo em maiúsculas espaçadas.
   ========================================================= */
.demo,.nicho-painel,.resultado,.form,.palco-muda,.assinatura{box-shadow:none}
.assinatura-texto small{letter-spacing:0;text-transform:none;font-size:13px}
.assinatura-texto small::before{box-shadow:none;border-radius:2px}
.assinatura-texto h4{font-size:clamp(20px,1.9vw,24px);font-weight:500;letter-spacing:-.028em}
.tambem > span{letter-spacing:0;text-transform:none;font-size:14px}
.tambem li::before{border-radius:1px;transform:rotate(45deg)}
.janela-tela .tocar,.tela-cheia{backdrop-filter:none;-webkit-backdrop-filter:none}
.cenario b,.nicho,.demo .titulo-demo b,.calendario .cab b,.obj b,.bandeja-cab b,.nicho-painel .exemplo b{letter-spacing:-.022em}
.cenario b{font-size:19.5px;font-weight:600}
.nicho{font-size:18.5px;font-weight:500}
.texto-f h3{font-weight:500;letter-spacing:-.03em;line-height:1.12}
.cronometro b,.num-heroi{font-family:var(--serif)}
.objetivo-frase{font:400 clamp(17px,1.5vw,19.5px)/1.45 var(--texto-f)}
.objetivo-frase b{font-weight:600}
.obj .ponto{box-shadow:none;border-radius:2px}
.obj b{font-size:16.5px;font-weight:600}
.bandeja{background:var(--cartao);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--sombra-leve)}
.bandeja-lista{mask-image:none;-webkit-mask-image:none}
html.mov .peca{background-image:none}
.peca h3{font-size:18.5px}
.voo{box-shadow:none}
.nicho-desenho{background:var(--cartao-2);border-radius:var(--raio)}
.nicho-painel .exemplo small{letter-spacing:0;text-transform:none;font-size:13px}
.nicho-painel .exemplo b{font-weight:500}
.faq summary{font-size:18.5px;font-weight:500;letter-spacing:-.02em}
.faq details p a{color:var(--ouro)}
.selo-status{letter-spacing:0;text-transform:none;font-size:13.5px}
.selo-status::before{border-radius:1px;transform:rotate(45deg)}
.diagnostico{background:var(--fundo)}
.orcamento{border-top:0;background:var(--fundo)}
.orcamento .cabeca h1{font-size:clamp(38px,4.4vw,60px)}
.orcamento .cabeca .link-seta{margin-top:6px}
.orcamento .passos-orc i{font-family:var(--serif)}
.resultado h3{font-size:22px;font-weight:500;letter-spacing:-.025em}
.chip{font-weight:600}
/* página de projetos: número de cada projeto e texto em duas colunas */
.grade-trabalhos{counter-reset:projeto}
.trabalho{counter-increment:projeto}
.trabalho-texto h2{font-size:clamp(28px,3vw,40px)}
.trabalho-texto h2::before{content:"0" counter(projeto);display:block;margin-bottom:8px;font:500 19px/1 var(--serif);letter-spacing:0;color:var(--ouro)}
.trabalhos-lista{padding-top:clamp(36px,5vw,72px)}

.janela-barra i,.janela-barra i:nth-child(1),.janela-barra i:nth-child(2),.janela-barra i:nth-child(3){background:#3A3F4D}
/* sem movimento automático (toque, "reduzir movimento"): somem os controles de movimento da abertura */
html:not(.mov) .palco-caps,html:not(.mov) .palco-controles{display:none}
/* a página do orçamento começa pelo formulário: menos respiro em cima */
.orcamento{padding-top:clamp(28px,4.4vw,60px)}

/* celular: blocos de vários cartões viram trilho de deslizar (regra 8), com o próximo cartão aparecendo na borda */
@media (max-width:760px){
  .grade-assinaturas,.entrega,.compromissos,.tambem{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(clamp(18px,4.2vw,56px) * -1);padding-inline:clamp(18px,4.2vw,56px);scroll-padding-inline:clamp(18px,4.2vw,56px)}
  .grade-assinaturas::-webkit-scrollbar,.entrega::-webkit-scrollbar,.compromissos::-webkit-scrollbar,.tambem::-webkit-scrollbar{display:none}
  .grade-assinaturas > *,.entrega > *,.compromissos > *{flex:0 0 84%;scroll-snap-align:start;min-width:0}
  .item-entrega,.compromisso{border:1px solid var(--linha);border-radius:var(--raio);background:var(--cartao);padding:18px 18px 20px}
  .tambem{flex-wrap:nowrap;gap:8px;scroll-snap-type:none}
  .tambem > span,.tambem li{flex:none;white-space:nowrap}
}
@media (max-width:480px){.cozinhas button{font-size:11.5px;letter-spacing:-.02em;padding:9px 0}}
/* relógio: o ponto tocado com o mouse não ganha moldura; no teclado, o próprio ponto engrossa */
.r-ponto,.r-ponto:focus{outline:none}

/* =========================================================
   Como trabalhamos: "Quem somos", o nome se formando (v9, 19/10/2026)
   aurum (ouro) + -fex (quem faz) viram "Aurifex"; movimento em js/quem.js.
   O estado sem classe é o FINAL (assim nasce no ?captura); nf-a, nf-b e nf-c são as fases da formação.
   ========================================================= */
.quem{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,84px);align-items:center}
.quem .cabeca{margin-bottom:0}
.nome-forma{margin:0;display:grid;gap:clamp(20px,2.4vw,28px);justify-items:center;padding:clamp(34px,4vw,54px) clamp(22px,3.4vw,48px) clamp(20px,2.4vw,28px);background:color-mix(in srgb,var(--cartao) 92%,transparent);border:1px solid var(--linha);border-top:1px solid var(--ouro);border-radius:var(--raio);box-shadow:var(--sombra-peca);cursor:default}
.nf-palco{display:grid;width:min(100%,540px);align-items:center}
.nf-palco > *{grid-area:1 / 1}
/* as duas palavras latinas */
.nf-raizes{display:flex;justify-content:center;align-items:flex-start;font:500 clamp(46px,5.2vw,78px)/1 var(--serif);font-variation-settings:"opsz" 96;letter-spacing:-.01em;color:var(--texto);opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none}
/* com o STUDIO à direita, as palavras latinas encolhem na proporção do Aurifex e ficam em cima dele (63,08% do logo) */
.nf-raizes{width:63.08%;font-size:calc(clamp(46px,5.2vw,78px) * .6308)}
.nf-raiz{display:grid;justify-items:center;gap:14px}
.nf-raiz b{font-weight:500;white-space:nowrap}
.nf-raiz small{font:500 14px/1.2 var(--display);letter-spacing:.01em;color:var(--texto-3)}
.nf-mais{display:inline-block;overflow:hidden;max-width:1.3em;padding-inline:.22em;color:var(--ouro);font:300 .6em/1.62 var(--display);text-align:center}
.nf-cai,.nf-i,.nf-hifen{display:inline-block;overflow:hidden;vertical-align:bottom}
.nf-cai{max-width:1.5em}
.nf-i{max-width:0;opacity:0;color:var(--ouro)}
.nf-hifen{max-width:.4em;font-weight:700}
/* o nome formado, com um fio para cada parte */
.nf-nome{padding-bottom:34px}
.nf-nome-svg{position:relative}
.nome-logo{display:block;width:100%;height:auto}
.nf-chave{position:absolute;top:82%;display:grid;justify-items:center;gap:9px}
/* as posições de antes (1,3/55,5 e 59,2/39,5%) refeitas para o logo com STUDIO, 12.058 unidades em vez de 7.606 */
.nf-chave.c1{left:.82%;width:35.01%}
.nf-chave.c2{left:37.34%;width:24.92%}
.nf-chave i{display:block;width:100%;height:9px;border:1px solid var(--ouro);border-top:0}
.nf-chave small{font-size:13.5px;line-height:1.2;color:var(--texto-2);white-space:nowrap}
.nf-chave small b{font:650 1.3em/1 var(--serif);color:var(--ouro);font-variation-settings:"opsz" 24}
.nf-chave small b::after{content:"·";font:400 .78em/1 var(--display);color:var(--texto-3);margin:0 .45em}
.nf-pe{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding-top:16px;border-top:1px solid var(--linha);font-size:15px;color:var(--texto-2)}
.nf-pron span{color:var(--texto);font-weight:500;margin-left:.3em}
.nf-pron b{color:var(--ouro);font-weight:700}
.nf-botao{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 4px 0 12px;border:0;background:transparent;font:600 14px/1 var(--display);color:var(--texto-2);cursor:pointer;touch-action:manipulation;transition:color .2s}
.nf-botao:hover{color:var(--texto)}
.nf-botao svg{width:17px;height:17px;fill:none;stroke:var(--ouro);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--curva)}
.nf-botao:hover svg{transform:rotate(-200deg)}
html.captura .nf-botao{visibility:hidden}
/* as transições só valem com movimento; nf-sem volta ao começo sem animar */
html.mov .nf-raizes{transition:opacity .3s ease,transform .5s var(--curva)}
html.mov .nf-raiz small,html.mov .nf-pron{transition:opacity .45s ease}
html.mov .nf-mais,html.mov .nf-hifen{transition:max-width .7s var(--curva) .1s,opacity .35s ease,padding .7s var(--curva) .1s}
html.mov .nf-cai{transition:transform .55s cubic-bezier(.5,0,.8,.4),opacity .5s ease .1s,max-width .7s var(--curva) .3s}
html.mov .nf-i{transition:max-width .7s var(--curva) .3s,opacity .5s ease .5s}
html.mov .nf-nome{transition:opacity .4s ease}
html.mov .nf-chave i{transform-origin:center;transition:transform .8s var(--curva)}
html.mov .nf-chave.c2 i{transition-delay:.15s}
html.mov .nf-chave small{transition:opacity .5s ease .45s}
html.mov .nf-chave.c2 small{transition-delay:.6s}
.nome-forma.nf-sem *{transition:none!important}
/* fase A: as duas palavras, cada uma com o seu significado */
.nf-a .nf-raizes,.nf-b .nf-raizes{opacity:1;transform:none}
.nf-a .nf-nome,.nf-b .nf-nome{opacity:0}
/* fase B: o "um" cai como lasca, o i de ligação entra, o "+" e o hífen somem e as partes se juntam */
.nf-b .nf-cai{max-width:0;opacity:0;transform:translateY(.55em) rotate(24deg)}
.nf-b .nf-i{max-width:.34em;opacity:1}
.nf-b .nf-mais,.nf-b .nf-hifen{max-width:0;opacity:0;padding-inline:0}
.nf-b .nf-raiz small{opacity:0}
/* fase C: vira o logo (o pixel cai por js/marca.js); os fios e a pronúncia esperam */
.nf-c .nf-raizes{opacity:0;transform:translateY(-14px) scale(1.03)}
.nf-a .nf-chave i,.nf-b .nf-chave i,.nf-c .nf-chave i{transform:scaleX(0)}
.nf-a .nf-chave small,.nf-b .nf-chave small,.nf-c .nf-chave small,.nf-a .nf-pron,.nf-b .nf-pron,.nf-c .nf-pron{opacity:0}
@media (max-width:900px){.quem{grid-template-columns:1fr}.nome-forma{justify-self:stretch}}
@media (max-width:480px){.nf-chave small{font-size:12px}.nf-pe{font-size:14px}.nf-nome{padding-bottom:34px}}
/* a folha da proposta leva o logo (o papel é sempre claro) */
/* 26 px, como no cabeçalho: menor que isso os fios finos da Bodoni somem no papel; um contorno leve os reforça */
/* 28 px desde o STUDIO (20/10): com 26 o STUDIO ficava abaixo de 10 px (regra 11.6) */
.folha-marca .logo{height:28px;margin:-4px 0 -2px}
.folha-marca .logo .le{stroke:#1A2133;stroke-width:22}
.folha-marca .logo .le{fill:#1A2133}
.folha-marca .logo .ouro{fill:#C0922F}
.folha-marca .logo .sombra{fill:#8A6526}
.folha-marca .logo .est{fill:#4A5266;stroke:none}

/* Página 404 (etapa 1 da publicação, 19/10/2026): o pixel de ouro caiu embaixo do i; o mouse ou o dedo o devolve */
.nao-achou{min-height:min(76svh,640px);display:grid;align-items:center;border-bottom:0}
.acoes-404{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.pixel-perdido{justify-self:center;width:min(100%,460px);padding-bottom:30px}
.pixel-perdido .pixel{transform:translate(260px,1700px) rotate(22deg);transform-box:fill-box;transform-origin:center;transition:transform .9s cubic-bezier(.3,1.5,.5,1)}
.pixel-perdido:hover .pixel,.pixel-perdido:active .pixel{transform:none}
@media (max-width:900px){.pixel-perdido{justify-self:start;width:min(100%,340px)}}