/* =========================================================
   AURIFEX STUDIO v9 (antes Sentinel v8, 09/10/2026) :: base
   Outro site para a mesma agência: várias páginas, letra sem
   serifa, cantos curtos, fios finos e o trabalho em primeiro
   plano. Sem degradê, sem brilho e sem itálico de enfeite.

   Três paletas: Meia-noite (a mesma da v7, padrão), Linho
   (clara) e Grafite (escura). Os nomes das variáveis são os
   da v7, para as demonstrações trazidas de lá herdarem as cores.
   ========================================================= */
@font-face{font-family:"Schibsted";src:url("../fontes/schibsted.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Schibsted";src:url("../fontes/schibsted-italico.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni";src:url("../fontes/bodoni.woff2") format("woff2");font-weight:400 700;font-display:swap}

/* ---------- paletas ---------- */
:root{
  color-scheme:dark;
  --fundo:#0C111C;--fundo-2:#101727;--cartao:#151D2F;--cartao-2:#1B2539;--linha:#243049;--linha-forte:#3A4763;
  --texto:#F3EFE7;--texto-2:#C4C6CD;--texto-3:#8D94A5;
  --ouro:#D6B97F;--ouro-forte:#E8CE99;--ouro-fundo:#2A2617;--sobre-ouro:#15110A;--ouro-sombra:#A3854E;
  --verde:#93D2B0;--verde-fundo:#14302A;--vermelho:#E39D95;--vermelho-fundo:#3A2229;--azul:#9CC0EA;
  --zap:#25D366;
  --fundo-rgb:12 17 28;--ouro-rgb:214 185 127;--tinta-rgb:0 0 0;--traco-rgb:243 239 231;
  --mapa-fundo:#131B2B;--mapa-rua:#1D2740;--mapa-rua-2:#2B3754;--mapa-quadra:#18213A;--mapa-verde:#15302C;
  --cat-atrair:#8DB8E6;--cat-converter:#D6B97F;--cat-receber:#93D2B0;--cat-fidelizar:#E3A58F;--cat-medir:#BBA9E6;
  --sobre-cat:#15110A;
  --moldura:#05070C;--moldura-fio:#2C3852;
  --sombra:0 22px 48px -30px rgba(0,0,0,.75);
  --sombra-leve:0 12px 28px -20px rgba(0,0,0,.8);
  --sombra-peca:0 2px 0 rgba(255,255,255,.03) inset,0 30px 60px -34px rgba(0,0,0,.85),0 10px 22px -14px rgba(0,0,0,.6);
  --display:"Schibsted","Segoe UI",system-ui,Roboto,sans-serif;
  --texto-f:"Schibsted","Segoe UI",system-ui,Roboto,sans-serif;
  --serif:"Bodoni","Bodoni Moda","Didot","Times New Roman",serif;
  --raio:6px;--raio-chip:6px;
  --curva:cubic-bezier(.2,.7,.1,1);
  --topo-a:64px;
}
/* Linho (clara): a mesma marca de dia. Papel de linho, tinta azul-marinho e bronze. */
html[data-paleta="linho"]{
  color-scheme:light;
  --fundo:#F3EFE6;--fundo-2:#EBE6DA;--cartao:#FBF9F4;--cartao-2:#F3EEE3;--linha:#DDD6C7;--linha-forte:#B9AF9A;
  --texto:#121A2C;--texto-2:#3A4356;--texto-3:#5C6373;
  --ouro:#80521A;--ouro-forte:#946223;--ouro-fundo:#EFE2C8;--sobre-ouro:#FFFFFF;--ouro-sombra:#5A3810;
  --verde:#226B46;--verde-fundo:#DAEADD;--vermelho:#A23E2C;--vermelho-fundo:#F4DDD5;--azul:#27588F;
  --fundo-rgb:243 239 230;--ouro-rgb:128 82 26;--tinta-rgb:40 34 20;--traco-rgb:40 34 20;
  --mapa-fundo:#E7E0D1;--mapa-rua:#FBF8F2;--mapa-rua-2:#F2ECE1;--mapa-quadra:#DCD3C1;--mapa-verde:#D0E0CC;
  --cat-atrair:#27588F;--cat-converter:#80521A;--cat-receber:#226B46;--cat-fidelizar:#A23E2C;--cat-medir:#63489F;
  --sobre-cat:#FFFFFF;
  --moldura:#141B2C;--moldura-fio:#141B2C;
  --sombra:0 22px 44px -30px rgba(40,34,20,.4);
  --sombra-leve:0 12px 26px -20px rgba(40,34,20,.4);
  --sombra-peca:0 30px 56px -34px rgba(40,34,20,.5),0 10px 20px -14px rgba(40,34,20,.3);
}
/* Grafite (escura): neutra e quente. Carvão, branco de papel e ouro (era cobre até a v8; ouro desde a v9, com a marca Aurifex Studio). */
html[data-paleta="grafite"]{
  --fundo:#111213;--fundo-2:#161718;--cartao:#1B1C1E;--cartao-2:#232427;--linha:#2C2D31;--linha-forte:#47484D;
  --texto:#F1EFEA;--texto-2:#C8C6C0;--texto-3:#96948E;
  --ouro:#D8AE62;--ouro-forte:#E9C684;--ouro-fundo:#2E2716;--sobre-ouro:#17120A;--ouro-sombra:#9E7A3C;
  --verde:#9BD3B0;--verde-fundo:#16261D;--vermelho:#E8A097;--vermelho-fundo:#2E1B1A;--azul:#A5C4EC;
  --fundo-rgb:17 18 19;--ouro-rgb:216 174 98;--traco-rgb:241 239 234;
  --mapa-fundo:#18191B;--mapa-rua:#222326;--mapa-rua-2:#303136;--mapa-quadra:#1D1E21;--mapa-verde:#17241C;
  --cat-atrair:#9CC0E8;--cat-converter:#D8AE62;--cat-receber:#9BD3B0;--cat-fidelizar:#E8A88F;--cat-medir:#C1B2EA;
  --sobre-cat:#17100A;
  --moldura:#060606;--moldura-fio:#3A3B40;
}
/* o logo segue a cor de destaque da paleta */
/* o logo Aurifex Studio (19/10/2026): o nome desenhado, com o pixel de ouro no lugar do pingo do i (movimento em js/marca.js) */
.logo{display:block;height:1.155em;width:auto;overflow:visible}
.logo .le{fill:var(--texto);transform-box:fill-box;transform-origin:50% 100%}
.logo .ouro{fill:var(--ouro)}
.logo .sombra{fill:var(--ouro-sombra)}
.logo .le.baque{animation:baque-leve .38s cubic-bezier(.3,.7,.2,1)}
.logo .le-i.baque{animation:baque .42s cubic-bezier(.3,.7,.2,1)}
/* o STUDIO ao lado do Aurifex (pendência 23, jeito 2, 20/10/2026): na letra do site, no tom secundário do texto */
.logo .est{fill:var(--texto-2)}
@keyframes baque-leve{0%{transform:scaleY(1)}24%{transform:scaleY(.93)}58%{transform:scaleY(1.02)}100%{transform:scaleY(1)}}
@keyframes baque{0%{transform:scaleY(1)}22%{transform:scaleY(.86)}55%{transform:scaleY(1.04)}100%{transform:scaleY(1)}}

/* ---------- base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--topo-a) + 20px);-webkit-text-size-adjust:100%;background:var(--fundo)}
body{margin:0;background:transparent;color:var(--texto);font-family:var(--texto-f);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--ouro);color:var(--sobre-ouro)}
img,svg,video{max-width:100%}
img,video{display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.028em;line-height:1.06;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,4.5vw,66px);line-height:1;letter-spacing:-.04em}
h2{font-size:clamp(29px,3.2vw,44px);letter-spacing:-.034em}
h3{font-size:21px;line-height:1.2;letter-spacing:-.02em;font-weight:600}
h4{font-size:18px;line-height:1.25;letter-spacing:-.015em;font-weight:600}
/* a v7 marcava uma palavra em itálico dourado em todo título; aqui o destaque é raro e sem itálico */
h1 em,h2 em,h3 em,h4 em{font-style:normal;color:inherit}
.ouro{color:var(--ouro)}
p{margin:0}
.miolo{max-width:1240px;margin:0 auto;padding-inline:clamp(18px,4.2vw,56px)}
section{padding-block:clamp(52px,6.4vw,96px)}
section.tom{background:color-mix(in srgb,var(--fundo-2) 72%,transparent);border-block:1px solid var(--linha)}
/* a prancheta: o fundo vivo (js/fundo.js) fica fixo atrás de tudo; por cima dele, uma grade fina de papel milimetrado */
.prancheta{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block;background-image:linear-gradient(rgb(var(--traco-rgb) / .045) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--traco-rgb) / .045) 1px,transparent 1px);background-size:96px 96px;background-position:-1px -1px}
html.captura .prancheta{background-image:none}
/* cabeçalho de seção: um padrão só. Número e nome, título, uma linha de apoio; tudo à esquerda. */
.cabeca{display:grid;gap:14px;max-width:62ch;margin-bottom:clamp(28px,3.6vw,48px);justify-items:start}
.cabeca > p:not(.rotulo){color:var(--texto-2);font-size:17px;line-height:1.6;max-width:58ch}
.rotulo{display:inline-flex;align-items:baseline;gap:10px;font-size:14.5px;font-weight:500;color:var(--texto-3)}
.rotulo b{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--ouro);font-variation-settings:"opsz" 20}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--raio);border:1.5px solid transparent;font:600 15px/1.2 var(--texto-f);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .15s;touch-action:manipulation}
.botao:active{transform:scale(.985)}
.botao.principal{background:var(--ouro);color:var(--sobre-ouro);border-color:var(--ouro)}
.botao.principal:hover{background:var(--ouro-forte);border-color:var(--ouro-forte)}
.botao.secundario{background:transparent;color:var(--texto);border-color:var(--linha-forte)}
.botao.secundario:hover{border-color:var(--texto-2)}
.botao.zap{background:var(--zap);color:#062B14;border-color:var(--zap)}
.botao .seta,.link-seta .seta{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--curva)}
.botao:hover .seta,.link-seta:hover .seta{transform:translateX(4px)}
.link-seta{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--texto);text-decoration:none;border-bottom:1px solid var(--linha-forte);padding-bottom:3px;transition:border-color .2s,color .2s}
.link-seta:hover{border-color:var(--ouro);color:var(--ouro)}
.acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
.nota{font-size:14px;color:var(--texto-3)}
.num{font-variant-numeric:tabular-nums}
.icone{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ouro);color:var(--sobre-ouro);padding:10px 14px;border-radius:var(--raio);font-weight:600;text-decoration:none}
.pular:focus{top:12px}

/* ---------- cabeçalho ---------- */
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--fundo);border-bottom:1px solid var(--linha);transition:box-shadow .3s}
.topo.rolou{box-shadow:0 14px 30px -22px rgb(var(--tinta-rgb) / .8)}
.topo .miolo{display:flex;align-items:center;gap:28px;height:var(--topo-a)}
.marca{display:inline-flex;align-items:center;font-size:28px;text-decoration:none;margin-right:auto}
.menu{display:flex;gap:30px;font-size:14.5px;font-weight:500}
.menu a{position:relative;text-decoration:none;color:var(--texto-2);padding-block:6px;white-space:nowrap;transition:color .2s}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ouro);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--curva)}
.menu a:hover{color:var(--texto)}
.menu a:hover::after,.menu a.atual::after{transform:scaleX(1)}
.menu a.atual{color:var(--texto)}
.topo .botao{min-height:40px;padding:0 18px;font-size:14px}
.menu-botao{display:none;width:44px;height:44px;margin-right:-10px;border:0;background:transparent;cursor:pointer;position:relative}
.menu-botao i{position:absolute;left:11px;right:11px;height:1.8px;background:var(--texto);border-radius:1px;transition:transform .35s var(--curva)}
.menu-botao i:first-child{top:17px}
.menu-botao i:last-child{top:25px}
.menu-botao[aria-expanded="true"] i:first-child{transform:translateY(4px) rotate(45deg)}
.menu-botao[aria-expanded="true"] i:last-child{transform:translateY(-4px) rotate(-45deg)}
.progresso{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progresso i{display:block;height:100%;background:var(--ouro);transform-origin:left;transform:scaleX(0)}
html:not(.mov) .progresso{display:none}
/* menu do celular: uma folha que desce, com as páginas, a paleta e o orçamento */
.gaveta{position:fixed;inset:calc(var(--topo-a) + env(safe-area-inset-top,0px)) 0 0 0;z-index:29;background:var(--fundo);padding:20px clamp(18px,4.2vw,56px) calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;overflow-y:auto;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .4s var(--curva)}
.gaveta.aberta{opacity:1;transform:none}
.gaveta a.pg{display:flex;justify-content:space-between;align-items:center;text-decoration:none;font:500 26px/1.2 var(--display);letter-spacing:-.025em;padding:14px 0;border-bottom:1px solid var(--linha)}
.gaveta a.pg.atual{color:var(--ouro)}
.gaveta a.pg .seta{width:18px;height:18px;fill:none;stroke:var(--texto-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gaveta .botao{margin-top:18px;min-height:52px}
.gaveta-paleta{margin-top:auto;padding-top:22px;display:grid;gap:10px}
.gaveta-paleta > span{font-size:13.5px;color:var(--texto-3)}
@media (max-width:980px){
  .menu,.topo .miolo > .botao{display:none}
  .menu-botao{display:block}
  :root{--topo-a:56px}
}
@media (min-width:981px){.gaveta{display:none!important}}

/* ---------- troca de paleta ---------- */
.paletas-lista{display:flex;gap:8px}
.paletas-lista button{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 13px 0 9px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:var(--cartao);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .2s}
.paletas-lista button i{width:22px;height:22px;border-radius:4px;background:linear-gradient(135deg,var(--p1) 0 50%,var(--p2) 50% 100%);border:1px solid rgb(127 127 127 / .35)}
.paletas-lista button small{font-weight:500;font-size:12px;color:var(--texto-3)}
.paletas-lista button[aria-pressed="true"]{border-color:var(--ouro)}
.paletas{position:fixed;left:16px;bottom:16px;z-index:25;display:grid;justify-items:start;gap:8px}
.paletas-botao{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:0 13px 0 9px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:var(--cartao);color:var(--texto);font-size:13.5px;font-weight:600;cursor:pointer;box-shadow:var(--sombra-leve)}
.paletas-botao i{width:20px;height:20px;border-radius:4px;background:linear-gradient(135deg,var(--fundo) 0 50%,var(--ouro) 50% 100%);border:1px solid var(--linha-forte)}
.paletas-painel{order:-1;background:var(--cartao);border:1px solid var(--linha-forte);border-radius:var(--raio);padding:10px;box-shadow:var(--sombra);display:none}
.paletas.aberta .paletas-painel{display:block}
.paletas-painel .paletas-lista{flex-direction:column}
.paletas-painel .paletas-lista button{background:var(--fundo);justify-content:flex-start}
@media (max-width:980px){.paletas{display:none}}
html.captura .paletas{display:none}

/* ---------- rodapé e barra fixa do celular ---------- */
.rodape{border-top:1px solid var(--linha);padding:clamp(40px,5vw,64px) 0 0;overflow:hidden}
.rodape .miolo{display:grid;grid-template-columns:1.3fr .8fr 1.1fr;gap:clamp(24px,4vw,64px)}
.rodape p{color:var(--texto-3);font-size:14.5px;max-width:42ch;margin-top:12px}
.rodape h4{font:600 14px/1.2 var(--texto-f);letter-spacing:0;color:var(--texto);margin-bottom:12px}
.rodape ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14.5px}
.rodape ul a{color:var(--texto-2);text-decoration:none}
.rodape ul a:hover{color:var(--ouro)}
.rodape .marca{margin:0}
.rodape .assinatura-marca{margin-top:10px;color:var(--texto-2);font-size:15px}
/* Instagram e e-mail (só com CONTATOS_PUBLICOS em gerador/montar.py, quando existirem) */
.rodape-contatos{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.rodape-contatos a{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--texto-2);text-decoration:none;font-size:15px;transition:color .2s}
.rodape-contatos a:hover{color:var(--texto)}
.rodape-contatos .icone{width:18px;height:18px;flex:none;fill:none;stroke:var(--ouro);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rodape-nome{display:block;margin:clamp(20px,3vw,40px) 0 -.25em;font:500 clamp(84px,19.4vw,300px)/1 var(--serif);letter-spacing:-.01em;color:var(--cartao-2);text-align:center;white-space:nowrap;user-select:none;pointer-events:none;font-variation-settings:"opsz" 96}
/* com o STUDIO o nome inteiro ocupa 92% da largura (antes, só o Aurifex ocupava 74%) */
.rodape-nome .logo{margin:0 auto;width:min(92%,1460px);height:auto}
.rodape-nome .logo .le{fill:var(--cartao-2)}
@media (max-width:820px){.rodape .miolo{grid-template-columns:1fr}}
.barra-fixa{display:none}
@media (max-width:980px){
  .barra-fixa{display:block;position:fixed;left:0;right:0;bottom:0;z-index:28;padding:8px clamp(18px,4.2vw,56px) calc(8px + env(safe-area-inset-bottom,0px));background:var(--fundo);border-top:1px solid var(--linha)}
  .barra-fixa .botao{width:100%;min-height:46px}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  body.sem-barra{padding-bottom:0}
  body.sem-barra .barra-fixa{display:none}
}

/* ---------- abertura das páginas internas ---------- */
.capa-interna{padding-block:clamp(40px,5.4vw,84px) clamp(36px,4.6vw,64px);border-bottom:1px solid var(--linha)}
.capa-interna .miolo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:center}
.capa-interna .texto{display:grid;gap:18px;justify-items:start}
.capa-interna h1{font-size:clamp(38px,4.6vw,64px)}
.capa-interna .lead{color:var(--texto-2);font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.6;max-width:54ch}
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.subnav a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--linha-forte);border-radius:var(--raio);font-size:14px;font-weight:600;text-decoration:none;color:var(--texto-2);transition:border-color .2s,color .2s}
.subnav a:hover{border-color:var(--ouro);color:var(--texto)}
@media (max-width:900px){.capa-interna .miolo{grid-template-columns:1fr}}
@media (max-width:640px){.subnav{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);max-width:100vw}.subnav::-webkit-scrollbar{display:none}.subnav a{flex:none}}

/* ---------- chamada do fim de cada página ---------- */
.chamada .miolo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.chamada .cabeca{margin-bottom:0}
.chamada h2{font-size:clamp(34px,4.2vw,58px);letter-spacing:-.04em}
.chamada .acoes{margin-top:8px}
.chamada-lista{margin:0;padding:0;list-style:none;display:grid;border-top:1px solid var(--linha)}
.chamada-lista li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:16px 0;border-bottom:1px solid var(--linha)}
.chamada-lista .icone{grid-row:span 2;color:var(--ouro);margin-top:2px}
.chamada-lista b{font-weight:600;font-size:16px}
.chamada-lista span{color:var(--texto-3);font-size:14.5px;line-height:1.5}
@media (max-width:900px){.chamada .miolo{grid-template-columns:1fr}}

/* ---------- trilho de deslizar (celular): o próximo cartão aparece na borda, e os pontos dizem onde se está ---------- */
.pontos{display:none}
@media (max-width:760px){
  .trilho-cel{display:flex!important;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)}
  .trilho-cel::-webkit-scrollbar{display:none}
  .trilho-cel > *{flex:0 0 84%;scroll-snap-align:start;min-width:0}
  .pontos{display:flex;justify-content:center;gap:7px;margin-top:14px}
  .pontos i{width:6px;height:6px;border-radius:50%;background:var(--linha-forte);transition:background .2s,transform .2s}
  .pontos i.on{background:var(--ouro);transform:scale(1.3)}
}

/* ---------- movimento (só com html.mov; desde a v9, todo visitante, também no celular; fora só no ?captura) ---------- */
@keyframes surgir{from{opacity:0;transform:translateY(8px)}}
html.mov .revela:not(.visto){opacity:0;transform:translateY(22px)}
html.mov .revela:not(.revelado){transition:opacity .8s var(--curva) calc(var(--i,0) * 80ms),transform .8s var(--curva) calc(var(--i,0) * 80ms)}
/* o fio de cima de cada cartão se estende quando ele aparece */
html.mov .fio-cresce{position:relative}
html.mov .fio-cresce::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--ouro);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--curva) calc(var(--i,0) * 110ms + .15s)}
html.mov .fio-cresce.visto::before{transform:scaleX(1)}
html.mov .revela .icone{stroke-dasharray:1 1;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1) calc(var(--i,0) * 80ms + .2s)}
html.mov .revela:not(.visto) .icone{stroke-dashoffset:1}
/* troca de página sem corte seco */
@view-transition{navigation:auto}
::view-transition-old(root){animation:pg-sai .28s ease both}
::view-transition-new(root){animation:pg-entra .5s var(--curva) both}
@keyframes pg-sai{to{opacity:0}}
@keyframes pg-entra{from{opacity:0;transform:translateY(10px)}}
html.troca-paleta::view-transition-old(root){animation:none}
html.troca-paleta::view-transition-new(root){animation:paleta-abre .7s var(--curva) both}
@keyframes paleta-abre{from{clip-path:circle(0 at var(--px,50%) var(--py,50%))}to{clip-path:circle(150vmax at var(--px,50%) var(--py,50%))}}
/* sem movimento (só no ?captura desde a v9, ou com a chave da v8 em gerador/montar.py), a troca de página é seca */
html:not(.mov)::view-transition-group(*),html:not(.mov)::view-transition-old(*),html:not(.mov)::view-transition-new(*){animation:none!important}
html.captura *,html.captura *::before,html.captura *::after{animation:none!important;transition:none!important}