/* Môni Nova · biblioteca de componentes do site
   Fonte da verdade visual das páginas. Toda página importa este arquivo;
   componente novo criado numa página entra aqui e na página design-system/index.html.
   Tokens da paleta B (branco queimado, preto queimado, vermelho). */

@font-face{font-family:Bricolage;src:url(fonts/bricolage-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Bricolage;src:url(fonts/bricolage-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Instrument;src:url(fonts/instrument-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Instrument;src:url(fonts/instrument-600.woff2) format("woff2");font-weight:600;font-display:swap}
/* manuscrita: só anotação e legenda. Covered By Your Grace, licença SIL OFL (Google Fonts), subconjunto latino com acentos do português */
@font-face{font-family:"Covered By Your Grace";src:url(fonts/covered-by-your-grace.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  /* cor de marca */
  --bq:#EFEADC;            /* branco queimado: fundo padrão */
  --pq:#1E1B18;            /* preto queimado: texto e fundo escuro */
  --verm:#D7131F;          /* vermelho: assinatura e ação (ponto, botão) */
  --verm-fechado:#A80F19;  

  /* tons funcionais: preto transparente. Só em linha, fundo discreto e texto de apoio. Nunca em bloco de cor. */
  --apoio:rgba(30,27,24,.70);   /* texto de apoio (contraste mínimo 4,5 para 1) */
  --linha:rgba(30,27,24,.16);   /* fio, borda */
  --cartao:rgba(30,27,24,.06);  /* fundo de cartão, no máximo 8% */
  --cartao-borda:rgba(30,27,24,.10);
  --suave:rgba(30,27,24,.08);   /* botão suave, pílula neutra */

  /* tipografia */
  --f-titulo:Bricolage,system-ui,sans-serif;
  --f-texto:Instrument,system-ui,sans-serif;
  --f-mao:"Covered By Your Grace","Bricolage",cursive;  /* manuscrita: anotação e legenda, nunca título, botão, menu ou cartão */

  /* espaço em múltiplos de 8 */
  --e1:8px;--e2:16px;--e3:24px;--e4:32px;--e5:48px;--e6:64px;--e7:96px;--e8:128px;

  /* forma */
  --margem-base:clamp(48px,4vw,72px);  /* margem lateral do menu e da abertura: cresce um pouco em tela larga */
  /* acima de 1920 px de largura (tela enorme ou zoom do navegador abaixo de 100%) a margem cresce junto: o conteúdo para de esticar
     e fica centralizado com a largura aprovada; fundos e pinturas continuam de ponta a ponta. Abaixo de 1920 px nada muda. */
  --margem:max(var(--margem-base),calc((100vw - 1920px)/2 + 72px));
  --raio-foto:4px;         /* foto: recorte reto, no máximo 4 px */
  --raio-pilula:999px;
  --quica:cubic-bezier(.3,1.6,.5,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.m{margin:0;background:var(--bq);color:var(--pq);font-family:var(--f-texto);font-size:18px;line-height:1.5}
.m img{max-width:100%}
/* imagens com largura e altura no HTML (reservam o espaço antes de carregar); especificidade zero: qualquer regra de tamanho do site vale por cima */
:where(.m img[width][height]){width:auto;height:auto}
.m :focus-visible{outline:2px solid var(--pq);outline-offset:3px}
/* papel: grão de papel por trás de tudo (regra de 11/10/2026: texto, botão, ícone e forma são duros; imagem e fundo são feitos à mão) */
.papel body.m::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(img/papel.png);mix-blend-mode:multiply;opacity:.55}

/* ---------- tipografia ---------- */
.m-titulo{font-family:var(--f-titulo);font-weight:700;letter-spacing:-.02em;line-height:.98;margin:0;font-size:clamp(44px,8vw,96px)}
.m-titulo--2{font-size:clamp(34px,5vw,56px);line-height:1.02}
.m-titulo--3{font-size:clamp(26px,3vw,34px);line-height:1.05;letter-spacing:-.015em}
/* síncope: as linhas se deslocam; use <span class="l2"> e <span class="l3"> */
.m-titulo .l{display:block}
.m-titulo .l2{padding-left:1.1em}
.m-titulo .l3{padding-left:.25em}
.m-texto{max-width:62ch}
.m-apoio{color:var(--apoio)}
.m-rotulo{font-family:var(--f-texto);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- manuscrita: anotação e legenda ---------- */
/* uma por tela, de 24 px para cima, vermelho ou preto, inclinada no máximo 4 graus, fora de menu, botão e cartão */
.m-nota{display:inline-block;font-family:var(--f-mao);font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1.1;color:var(--verm);transform:rotate(-4deg);transform-origin:left bottom}
.m-nota--preto{color:var(--pq)}
.m-foto-faixa{position:relative}
.m-foto-faixa figcaption{position:absolute;left:0;right:0;bottom:0;background:var(--pq);color:var(--bq);padding:10px 16px;font-family:var(--f-mao);font-size:22px;line-height:1.15;border-radius:0 0 var(--raio-foto) var(--raio-foto)}

/* ---------- ponto (assinatura) ---------- */
.m-ponto{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--verm);margin-left:.06em;vertical-align:baseline}
.m-ponto--quica{animation:m-quica 1.1s var(--quica) .4s both}
@keyframes m-quica{0%{transform:translateY(-1.6em);opacity:0}35%{opacity:1}100%{transform:translateY(0)}}
@keyframes m-pulo{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

/* ---------- botões ---------- */
.m-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 24px 16px 28px;border:0;font:600 16px/1 var(--f-texto);cursor:pointer;text-decoration:none;
  border-radius:var(--raio-pilula) var(--raio-pilula) var(--raio-pilula) 6px;transition:border-radius .3s,background-color .2s,color .2s}
.m-btn:hover{border-radius:var(--raio-pilula) var(--raio-pilula) 6px var(--raio-pilula)}
.m-btn i{width:10px;height:10px;border-radius:50%;background:currentColor;display:block;flex:none}
.m-btn:hover i{animation:m-pulo .6s var(--quica)}
.m-btn--primario{background:var(--verm);color:#fff}
.m-btn--primario:hover{background:var(--verm-fechado)}
.m-btn--suave{background:var(--suave);color:var(--pq)}
.m-btn--suave i{background:var(--verm)}
.m-btn--suave:hover{background:var(--linha)}
.m-btn--escuro{background:var(--pq);color:var(--bq);border-radius:var(--raio-pilula) 6px var(--raio-pilula) var(--raio-pilula)}
.m-btn--escuro i{background:var(--verm)}
.m-btn--escuro:hover{border-radius:6px var(--raio-pilula) var(--raio-pilula) var(--raio-pilula)}
.m-btn .ic{width:20px;height:20px;display:block}
.m-link{font-weight:600;color:var(--pq);text-decoration:none;display:inline-flex;align-items:center;gap:10px;border-bottom:1.5px solid var(--pq);padding-bottom:2px}
.m-link::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--verm);display:block}
.m-link:hover::after{animation:m-pulo .6s var(--quica)}

/* ---------- pílulas e filtros (formato de porta, o n do logo) ---------- */
.m-tag{display:inline-block;padding:8px 16px 6px;border-radius:var(--raio-pilula) var(--raio-pilula) 0 0;font:600 13px/1.2 var(--f-texto);background:var(--suave);color:var(--pq);border:0;cursor:pointer}
.m-tag--on{background:var(--pq);color:var(--bq)}
.m-tag--verm{background:var(--verm);color:#fff}

/* ---------- navegação em pílula ---------- */
.m-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);padding:var(--e3) var(--margem)}
.m-nav .logo{height:26px;display:block}
.m-nav ul{display:flex;gap:var(--e1);list-style:none;margin:0;padding:6px;border-radius:var(--raio-pilula);background:var(--suave)}
.m-nav li a{display:block;padding:10px 18px;border-radius:var(--raio-pilula);font:600 15px/1 var(--f-texto);color:var(--pq);text-decoration:none}
.m-nav li a:hover{background:var(--linha)}
.m-nav li a.on{background:var(--pq);color:var(--bq)}
.m-nav li a.cta{background:var(--verm);color:#fff;display:inline-flex;gap:8px;align-items:center}
.m-nav li a.cta i{width:8px;height:8px;border-radius:50%;background:#fff;display:block}
.m-nav li a.cta:hover{background:var(--verm-fechado)}
/* quando a tela já tem o botão vermelho principal (abertura), o "Fale comigo" do menu fica escuro: um botão vermelho por tela */
.m-nav li a.cta--escuro{background:var(--pq);color:var(--bq)}
.m-nav li a.cta--escuro i{background:var(--verm)}
.m-nav li a.cta--escuro:hover{background:#000}

/* ---------- cartões (forma tirada do logo; no máximo um efeito por cartão) ---------- */
.m-card{position:relative}
.m-card h3{font-family:var(--f-titulo);font-weight:700;font-size:28px;line-height:1;letter-spacing:-.02em;margin:0 0 8px}
.m-card p{margin:0;font-size:16px;color:var(--apoio)}
.m-card--arco{border-radius:999px 999px 0 0;overflow:hidden;background:var(--cartao)}
.m-card--arco .foto{aspect-ratio:1/1.05;background-size:cover;background-position:center}
.m-card--arco .tx{padding:20px 28px 28px}
.m-card--canto{border-radius:0 140px 0 0;background:var(--cartao);box-shadow:inset 0 0 0 1px var(--cartao-borda);padding:32px 28px 28px;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end}
.m-card--verm{border-radius:140px 0 0 0;background:var(--verm);color:#fff;padding:32px 28px 28px;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end}
.m-card--verm p{color:rgba(255,255,255,.9)}
.m-num{width:46px;height:46px;border-radius:50%;background:var(--suave);display:grid;place-items:center;font:700 18px var(--f-titulo);margin-bottom:auto}
.m-card--verm .m-num{background:rgba(30,27,24,.18);align-self:flex-end}
.m-sincope{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3);align-items:start}
.m-sincope>:nth-child(2){margin-top:44px}
.m-sincope>:nth-child(3){margin-top:14px}

/* ---------- foto ---------- */
.m-foto{display:block;width:100%;border-radius:var(--raio-foto);object-fit:cover}
.m-legenda{font-size:13px;font-weight:600;margin-top:8px}

/* ---------- linha e tons funcionais ---------- */
.m-linha{border:0;border-top:1px solid var(--linha);margin:var(--e3) 0}
.m-bloco-suave{background:var(--cartao);border:1px solid var(--cartao-borda);padding:var(--e3)}

/* ---------- abertura (hero) ---------- */
/* título em síncope + ponto que quica + foto desencontrada, sangrando até a borda da tela.
   Um botão vermelho, um ponto vermelho, uma anotação (preta). O vermelho grande vem da foto. */
.m-hero{
  /* BOTÕES DE AJUSTE (valores em px; positivo desce, negativo sobe) */
  --ajuste-texto-y:0px;     /* desce ou sobe o bloco de texto */
  --ajuste-foto-y:18px;     /* desce ou sobe o começo da foto (18 px: ajuste da Mônica em 11/10) */
  --respiro:96px;           /* espaço livre entre o texto e a foto */
  --foto-topo:56px;         /* quanto a foto começa abaixo do topo da abertura */
  --t:clamp(40px,5vw,75px);
  /* a coluna do texto tem a largura exata do título mais o respiro; a foto fica com o resto da tela */
  display:grid;grid-template-columns:calc(var(--margem) + var(--t)*7.8 + var(--respiro)) minmax(0,1fr);min-height:min(clamp(660px,40vw,800px),calc(100vh - 140px))}
.m-hero{padding-bottom:var(--e7);padding-right:calc(var(--margem) - var(--margem-base))}  /* tela muito larga: a colagem não estica (0 até 1920 px) */
.m-hero__texto{padding:calc(var(--e5) + var(--foto-topo)) var(--respiro) var(--e5) var(--margem);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;transform:translateY(var(--ajuste-texto-y))}
.m-hero .m-titulo{font-size:var(--t);line-height:.98}
.m-hero__apoio{margin:var(--e4) 0 0;padding-left:calc(var(--t)*1.1);font-size:clamp(18px,1.65vw,22px);max-width:calc(30ch + var(--t)*1.1);text-wrap:pretty}
.m-hero__acao{margin:var(--e4) 0 0;padding-left:calc(var(--t)*1.1);display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap}
.m-hero__foto{margin-top:calc(var(--foto-topo) + var(--ajuste-foto-y));background-size:cover;background-position:30% 30%;min-height:360px;width:100%;max-width:var(--foto-max,1240px);justify-self:end}
/* entrada: a frase entra linha por linha, depois o apoio e o botão, e por último o ponto cai */
.m-hero .m-titulo .l{animation:m-entra .8s cubic-bezier(.2,.7,.2,1) both}
.m-hero .m-titulo .l:nth-child(2){animation-delay:.14s}
.m-hero .m-titulo .l:nth-child(3){animation-delay:.28s}
.m-hero__apoio{animation:m-entra .8s cubic-bezier(.2,.7,.2,1) .7s both}
.m-hero__acao{animation:m-entra .8s cubic-bezier(.2,.7,.2,1) .85s both}
.m-hero .m-ponto--quica{animation-delay:1.05s}
@keyframes m-entra{from{opacity:0;transform:translate(-.25em,.3em)}to{opacity:1;transform:none}}
/* títulos de seção (12/10): mesma entrada da abertura, disparada quando o título aparece na tela (o script põe .espera e depois .on) */
.m-revela.espera .m-rotulo,.m-revela.espera .m-titulo .l,.m-revela.espera .m-titulo .m-ponto,.m-revela.espera .m-cases__apoio,.m-revela.espera .m-nota{opacity:0}
.m-revela.on .m-rotulo{animation:m-entra .7s cubic-bezier(.2,.7,.2,1) both}
.m-revela.on .m-titulo .l{animation:m-entra .8s cubic-bezier(.2,.7,.2,1) .12s both}
.m-revela.on .m-titulo .l:nth-child(2){animation-delay:.26s}
.m-revela.on .m-titulo .m-ponto{animation:m-quica 1.1s var(--quica) .75s both}
.m-revela.on .m-cases__apoio{animation:m-entra .8s cubic-bezier(.2,.7,.2,1) .55s both}
.m-revela.on .m-nota{animation:m-escreve .9s cubic-bezier(.2,.7,.2,1) 1.1s both}   /* a nota já é girada com transform: a entrada usa translate e clip-path para não desfazer o giro */
@keyframes m-escreve{from{opacity:0;translate:0 .2em;clip-path:inset(-20% 100% -20% 0)}to{opacity:1;translate:0 0;clip-path:inset(-20% -5% -20% 0)}}

/* ---------- grade de linhas (asset) ---------- */
/* fios finos de 1 px em preto queimado, como linhas de construção de pôster suíço. Duros e exatos: o contraponto da colagem feita à mão.
   Uso pontual, em algumas seções (não em todas). As linhas se desenham ao abrir, uma depois da outra. Ficam atrás da colagem e do texto. */
.m-hero{position:relative}
.m-grade{position:absolute;inset:0;pointer-events:none;z-index:-1}
.m-grade i{position:absolute;display:block;background:var(--pq)}
.m-grade__h{height:1px;left:0;right:0;transform-origin:left center;animation:m-traco-x 1s cubic-bezier(.6,0,.2,1) both}
.m-grade__v{width:1px;top:0;bottom:0;transform-origin:center top;animation:m-traco-y 1.1s cubic-bezier(.6,0,.2,1) both}
.m-grade__h--topo{top:0;animation-delay:.05s}
.m-grade__v--meio{left:calc(var(--margem) + var(--t)*7.8 + var(--respiro)*.5);animation-delay:.2s}
.m-grade__v--borda{right:var(--margem);animation-delay:.35s}
.m-grade__h--base{bottom:0;animation-delay:.5s}
.m-hero__texto>.m-grade__h{position:relative;display:block;align-self:stretch;left:auto;right:auto;margin:var(--e4) calc(var(--respiro)*-.5) 0 0;background:var(--pq);animation-delay:.3s}
@keyframes m-traco-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes m-traco-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- colagem da abertura ---------- */
/* camadas soltas, sem moldura retangular: disco vermelho (o ponto crescido), fragmento de pintura cortado à mão com a mão
   saindo do corte, e o notebook por cima. Cada camada tem a sua paralaxe e o seu ajuste (data-aj). */
.m-colagem{position:relative;margin-top:calc(var(--foto-topo)*.2);min-height:600px;width:100%}
.m-colagem__disco{position:absolute;right:46%;top:6%;width:min(300px,18vw);aspect-ratio:1;border-radius:50%;background:var(--verm);z-index:0;
  transform:translate(calc(var(--px,0)*-12px),calc(var(--py,0)*-8px));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
/* o disco se prende à borda esquerda da pintura (--arte-x, medida por script), com ~86% para fora dela, como na tela de 1852
   aprovada. Antes ficava preso a 46% da colagem e sumia atrás da pintura em telas abaixo de ~1600 px.
   O limite de -60px impede que ele invada a coluna do texto em telas estreitas. */
@media (min-width:821px){
  .m-colagem{--disco-w:min(300px,18vw)}
  .m-colagem__disco{width:var(--disco-w)}
  .m-colagem.medida .m-colagem__disco{right:auto;left:max(calc(var(--arte-x) - var(--disco-w)*.86),-60px)}
  .m-hero .m-titulo .l{white-space:nowrap}  /* "Marca e site no ar," nunca quebra (quebrava em janelas de ~1300 px) */
  /* 12/10 (Mônica: "ainda estão longe"): colagem mais fechada. A pintura cresce para a esquerda (segue passando da borda direita)
     e o notebook entra uns 100 px por cima dela, em camadas. O disco segue a borda da pintura sozinho (--arte-x). */
  .m-colagem .m-colagem__arte{top:1%;height:112%}
  .m-colagem [data-aj="notebook"]{--aj-x:45px}
}
.m-colagem__arte{position:absolute;right:-1%;top:5%;height:104%;width:auto;max-width:none;z-index:1;rotate:2deg;display:block;
  transform:translate(calc(var(--px,0)*6px),calc(var(--py,0)*5px));transition:transform .6s cubic-bezier(.2,.7,.2,1)}

/* versão com textura de papel: abrir a página com ?papel no endereço (o padrão, sem nada, é a versão lisa aprovada em 11/10) */
.papel .m-colagem__disco{background:var(--verm) url(img/papel.png);background-blend-mode:multiply;filter:drop-shadow(0 12px 12px rgba(30,27,24,.22))}

/* ---------- notebook solto (mockup chapado, sem sombra) ---------- */
/* fica dentro da foto da abertura e sai da moldura à esquerda e embaixo. A tela mostra um case publicado. */
/* foto de notebook de verdade (png recortado, com a tela já aplicada em perspectiva). Solto: grande, inclinado,
   passa da moldura da foto e da borda da página. Entra fora do tempo (síncope), depois balança devagar (bossa). */
.m-notebook{position:absolute;left:-190px;bottom:-60px;width:min(720px,45vw,calc((100vh - 140px)*1.08));rotate:5deg;z-index:3;
  animation:m-nb-entra 1.3s cubic-bezier(.3,1.45,.5,1) 1.15s both, m-nb-balanco 7.5s ease-in-out 2.5s infinite alternate}
.m-notebook__par{transition:transform .5s cubic-bezier(.2,.7,.2,1);transform:translate(calc(var(--px,0)*16px),calc(var(--py,0)*12px))}
.m-notebook img{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 22px rgba(30,27,24,.22))}
/* a entrada espera a colagem aparecer na tela (no celular ela fica abaixo da dobra e a animação acabava antes de alguém ver).
   A classe "espera" só existe com script; sem script a entrada roda no carregamento, como antes. */
.m-colagem.espera :is(.m-notebook,.m-colagem__disco,.m-colagem__arte){animation-play-state:paused}
@keyframes m-disco-entra{from{scale:0}to{scale:1}}
@keyframes m-arte-entra{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
/* a colagem entra em camadas, depois do texto: disco, pintura, notebook (aprovado pela Mônica em 12/10, no celular e no computador).
   na-abertura = a colagem já aparece na primeira tela, então espera o texto terminar; sem ela (aparece ao rolar), entra logo.
   Usa "scale" separado de "transform" para não brigar com a paralaxe do mouse. */
.m-colagem__disco{animation:m-disco-entra .9s var(--quica) .1s both}
.m-colagem__arte{animation:m-arte-entra .9s cubic-bezier(.2,.7,.2,1) .3s both}
.m-colagem.na-abertura .m-colagem__disco{animation-delay:1.5s}
.m-colagem.na-abertura .m-colagem__arte{animation-delay:1.7s}
.m-colagem.na-abertura .m-notebook{animation-delay:2s,3.5s}
@keyframes m-nb-entra{0%{opacity:0;transform:translate(90px,70px) rotate(12deg)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes m-nb-balanco{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(8px,-10px) rotate(1.4deg)}}
.m-hero__foto{position:relative;background-position:50% calc(34% + var(--py,0)*4%)!important}

/* ajuste manual: elementos com data-aj aceitam deslocamento fino (usado pelo modo ajuste, ajuste.js).
   "translate" é independente de "transform", então não briga com as animações de entrada. */
[data-aj]{--aj-x:0px;--aj-y:0px;translate:var(--aj-x) var(--aj-y)}  /* zera por elemento: variável herdada de um pai com ajuste não pode empurrar o filho */
/* ajustes da Mônica na abertura (11/10, tela de 1852 px), gravados como padrão. Só no computador. */
/* arrumado em 11/10: título alinhado com o logo; apoio e botão na mesma borda da 2ª linha do título; foto +36 mantém o respiro de ~138 px */
[data-aj="botão"]{--aj-y:-4px}
[data-aj="nota"]{--aj-x:12px;--aj-y:10px}
[data-aj="foto"]{--aj-x:36px;--aj-y:-7px}
@media (max-width:1200px){[data-aj="foto"]{--aj-x:0px}}
.m-hero{overflow-x:clip}
@media (max-width:820px){.m-hero [data-aj]{translate:none}}

/* ---------- passos (seção "Como funciona") ---------- */
/* 4 passos em colunas desencontradas (síncope), cada uma com um fio de 1 px no topo que se desenha ao entrar na tela.
   Número grande em Bricolage. O ponto vermelho só aparece no último passo: é o "no ar", o ponto chegando por último.
   Anotação manuscrita (uma por tela) ao lado do título. Sem JS a seção aparece pronta; com JS ela se desenha. */
.m-secao--larga{padding:var(--e7) var(--margem)}
/* a nota manuscrita fica encostada no fim do título, como anotação dele (antes ia para o canto direito da tela, solta) */
.m-passos-cab{display:flex;justify-content:flex-start;align-items:flex-end;gap:var(--e4);flex-wrap:wrap}
.m-passos-cab .m-rotulo{margin:0 0 var(--e3)}
.m-passos-cab .m-nota{margin-bottom:calc(var(--e1)*-1)}
.m-passos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4);align-items:start;margin-top:var(--e7)}
.m-passo{position:relative;padding-top:var(--e3)}
.m-passo::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--pq);transform-origin:left center;transition:transform 1s cubic-bezier(.6,0,.2,1) var(--atraso,0s)}
.m-passo:nth-child(2){margin-top:44px;--atraso:.15s}
.m-passo:nth-child(3){margin-top:14px;--atraso:.3s}
.m-passo:nth-child(4){margin-top:64px;--atraso:.45s}
.m-passo .m-passo__n{font-family:var(--f-titulo);font-weight:700;font-size:clamp(72px,8vw,128px);line-height:.9;letter-spacing:-.04em;margin:0 0 var(--e3);display:flex;align-items:baseline;color:var(--pq);max-width:none}
.m-passo h3{margin:0 0 var(--e1)}
.m-passo p{margin:0;font-size:17px;color:var(--apoio);max-width:30ch;text-wrap:pretty}
.m-passos-fim{margin-top:var(--e7);display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap}
/* entrada: só quando o script marca a seção com .pre (e o visitante aceita movimento) */
.m-passos.pre .m-passo::before{transform:scaleX(0)}
.m-passos.pre .m-passo>*{opacity:0;translate:0 .5em;transition:opacity .8s ease var(--atraso,0s),translate .8s cubic-bezier(.2,.7,.2,1) var(--atraso,0s)}
.m-passos.pre.on .m-passo::before{transform:none}
.m-passos.pre.on .m-passo>*{opacity:1;translate:none}
.m-passos.pre .m-ponto--chega{opacity:0}
.m-passos.pre.on .m-ponto--chega{opacity:1;animation:m-quica 1.1s var(--quica) 1.2s both}

/* ---------- fluxo (Como funciona com personagem) ---------- */
/* Cena fixa na tela enquanto a seção rola (a rolagem da página continua livre). O ponto vermelho atravessa as 4 etapas e se transforma:
   balão de conversa, formulário, formas do logo que caem e viram site, link que chega. O texto à esquerda troca por etapa, com cada linha
   subindo de dentro de uma máscara. Só liga com JavaScript e movimento liberado (html.fluxo-on); senão vale a lista .m-passos--reserva. */
.m-fluxo{display:none}
.fluxo-on .m-fluxo{display:block}
.fluxo-on .m-passos--reserva{display:none}
.m-fluxo__trilho{height:620vh;margin:var(--e6) calc(var(--margem)*-1) 0;position:relative}
.m-fluxo__palco{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--e6);align-items:center;padding:0 var(--margem);overflow:hidden}
.m-fluxo__texto{position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:center}
.m-fluxo__num{position:relative;height:clamp(96px,11vw,170px);margin-bottom:var(--e2)}
.m-fluxo__num>span{position:absolute;left:0;top:0;font:700 clamp(96px,11vw,170px)/.9 var(--f-titulo);letter-spacing:-.04em;display:flex;align-items:baseline;opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.m-fluxo__num>span.on{opacity:1;transform:none}
.m-fluxo__num .m-ponto--chega{width:.2em;height:.2em;opacity:0;transition:opacity .2s .5s}
.m-fluxo__num>span.on .m-ponto--chega{opacity:1;animation:m-quica 1.1s var(--quica) .6s both}
.m-fluxo__blocos{position:relative;min-height:230px}
.m-fluxo__bloco{position:absolute;inset:0 auto auto 0;width:100%;pointer-events:none}
.m-fluxo__bloco.on{pointer-events:auto}
.m-fluxo__bloco h3{margin:0 0 var(--e2)}
.m-fluxo__bloco p{margin:0;font-size:clamp(17px,1.5vw,20px);color:var(--apoio);max-width:34ch}
/* máscara por linha: a linha sobe de dentro de um recorte, com atraso crescente (síncope). Cada linha é uma frase curta, sem quebra no computador. */
.mk{display:block;overflow:hidden;padding-bottom:.12em;white-space:nowrap}
@media (max-width:820px){.mk{white-space:normal}}
.mk>span{display:block;transform:translateY(112%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.m-fluxo__bloco.on .mk>span{transform:none}
.m-fluxo__bloco.on .mk:nth-child(2)>span{transition-delay:.12s}
.m-fluxo__bloco.on h3 .mk>span{transition-delay:.04s}
.m-fluxo__bloco.on p .mk:nth-child(1)>span{transition-delay:.18s}
.m-fluxo__bloco.on p .mk:nth-child(2)>span{transition-delay:.28s}
.m-fluxo__bloco.on p .mk:nth-child(3)>span{transition-delay:.38s}
.m-fluxo__bloco.on p .mk:nth-child(4)>span{transition-delay:.48s}
.m-fluxo__bloco:not(.on) .mk>span{transition-duration:.35s;transform:translateY(-112%)}
.m-fluxo__pontos{position:absolute;right:calc(var(--margem)*-.5);top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:14px}
.m-fluxo__pontos i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--pq);display:block;transition:background .3s,transform .3s var(--quica)}
.m-fluxo__pontos i.on{background:var(--pq);transform:scale(1.35)}

.m-fluxo__cena{position:relative;z-index:1;height:min(600px,74vh);width:min(620px,100%);justify-self:center}
/* fundo do Como funciona (13/10, escolhido pela Mônica): papel em relevo de lírio e rosa, o mesmo nas 4 etapas, espelhado em 2x2 para não ter emenda
   e tingido com o branco queimado (multiply). Ele desce devagar enquanto a página sobe (posição y no script). Por cima, a grade à Lygia Clark
   em cores cheias (células criadas no script): a cada etapa as colunas mudam de largura e as células trocam de cor. O texto fica numa caixa creme. */
.m-fluxo__fundo{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--bq)}
/* a textura (540 KB) só baixa quando a seção chega perto da tela (classe posta pelo script do Como funciona) */
.m-fluxo__fundo.tem-papel{background:var(--bq) url(img/como/texturas/3-lirio-rosa.webp) 0 0/auto 200% repeat;background-blend-mode:multiply}
.m-fluxo__lygia{position:absolute;inset:0;display:flex}
.m-fluxo__lygia>div{display:flex;flex-direction:column;height:100%;transition:width 1.4s cubic-bezier(.65,0,.35,1)}
.m-fluxo__lygia i{flex:1;display:block;transition:background-color 1.2s ease}
.m-fluxo .m-fluxo__texto{z-index:1;background:var(--bq);padding:clamp(28px,3vw,48px) clamp(28px,3.4vw,56px)}
.m-fluxo .m-fluxo__pontos{right:clamp(16px,1.6vw,26px)}
.m-fluxo .cena .ficha,.m-fluxo .cena .b2{background:var(--bq)}
.m-fluxo .cena{position:absolute;inset:0;opacity:0;will-change:opacity}
.m-fluxo .tx{display:inline}
/* balões: o ponto vermelho cresce até virar balão (pílula com um canto reto, igual ao botão) */
.m-fluxo .b{position:absolute;overflow:hidden;font:600 clamp(17px,1.6vw,21px)/1.25 var(--f-texto);white-space:normal}
.m-fluxo .b1{left:4%;top:20%;background:var(--verm);color:#fff;border-radius:50% 50% 50% 8px;padding:0;width:28px;height:28px}
.m-fluxo .b1 .tx{display:block;padding:20px 26px;opacity:0}
.m-fluxo .b2{left:20%;top:56%;background:var(--cartao);box-shadow:inset 0 0 0 1px var(--cartao-borda);color:var(--pq);border-radius:50px 50px 8px 50px;padding:16px 24px;width:max-content;max-width:74%;opacity:0;font-weight:400}
.m-fluxo .b4{left:6%;top:62%;background:var(--verm);color:#fff;border-radius:34px 34px 34px 8px;padding:18px 24px;max-width:84%;width:max-content;opacity:0}
/* formulário */
.m-fluxo .ficha{position:absolute;inset:8% 2% 8% 2%;background:var(--cartao);box-shadow:inset 0 0 0 1px var(--cartao-borda);border-radius:0 150px 0 0;padding:clamp(28px,5vw,56px) clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,4vh,40px)}
.m-fluxo .campo small{display:block;font:600 12px/1 var(--f-texto);letter-spacing:.1em;text-transform:uppercase;color:var(--apoio);margin-bottom:10px}
.m-fluxo .campo{position:relative;border-bottom:1.5px solid var(--pq);padding-bottom:10px;min-height:68px;font:600 clamp(19px,2vw,26px)/1.2 var(--f-titulo);letter-spacing:-.01em}
.m-fluxo .campo::after{content:"";position:absolute;right:2px;bottom:12px;width:10px;height:10px;border-radius:50%;background:var(--verm);transform:scale(var(--ok,0))}
/* formas do logo que caem e viram marca + site */
.m-fluxo .formas{position:absolute;inset:0}
.m-fluxo .f{position:absolute;display:block;will-change:transform}
.m-fluxo .f-arco{left:8%;top:44%;width:21%;height:30%;background:var(--pq);border-radius:999px 999px 0 0}
.m-fluxo .f-anel{left:26%;top:18%;width:30%;aspect-ratio:1;border:clamp(16px,2.6vw,30px) solid var(--pq);border-radius:50%}
.m-fluxo .f-meio{left:50%;top:46%;width:30%;height:15%;border:clamp(16px,2.6vw,30px) solid var(--pq);border-bottom:0;border-radius:999px 999px 0 0;height:15%}
.m-fluxo .f-porta{left:62%;top:10%;width:16%;height:26%;background:var(--pq);border-radius:999px 999px 0 0}
.m-fluxo .f-haste{left:84%;top:30%;width:5%;height:44%;background:var(--pq)}
.m-fluxo .f-disco{left:30%;top:56%;width:22%;aspect-ratio:1;background:var(--verm);border-radius:50%}
.m-fluxo .f-ponto{left:78%;top:70%;width:8%;aspect-ratio:1;background:var(--pq);border-radius:50%}
.m-fluxo .site{position:absolute;left:50%;top:22%;width:48%;height:62%;background:var(--bq);box-shadow:0 0 0 1.5px var(--pq),0 24px 30px -10px rgba(30,27,24,.25);border-radius:14px 14px 4px 4px;opacity:0;overflow:hidden}
.m-fluxo .site__barra{height:30px;border-bottom:1.5px solid var(--pq);display:flex;gap:7px;align-items:center;padding:0 12px}
.m-fluxo .site__barra i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--pq);display:block}
.m-fluxo .site__corpo{padding:7% 8%}
.m-fluxo .site__corpo b{display:block;height:clamp(16px,2.4vw,26px);background:var(--pq);margin-bottom:10px;transform-origin:left;transform:scaleX(var(--w,0))}
.m-fluxo .site__corpo .t2{width:68%}
.m-fluxo .site__corpo em{display:block;height:8px;background:var(--linha);margin:8px 0;transform-origin:left;transform:scaleX(var(--w,0))}
.m-fluxo .site__corpo .curta{width:55%}
.m-fluxo .site__corpo u{display:block;width:44%;height:clamp(26px,3.4vw,38px);margin-top:18px;background:var(--verm);border-radius:999px 999px 999px 6px;transform:scale(var(--b,0));transform-origin:left}
/* link: o ponto fecha o endereço */
.m-fluxo .url{position:absolute;left:4%;top:24%;display:flex;align-items:baseline;gap:2px;font:700 clamp(26px,4.2vw,50px)/1 var(--f-titulo);letter-spacing:-.025em;white-space:nowrap}
.m-fluxo .url .m-ponto{opacity:0;margin-left:.04em}

@media (max-width:820px){
  .m-fluxo__trilho{height:680vh;margin:var(--e5) calc(var(--e2)*-1) 0}
  .m-fluxo__palco{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:var(--e2);align-items:start;padding:var(--e3) var(--margem-m,16px) 0}
  .m-fluxo__texto{min-height:0;justify-content:flex-start}
  .m-fluxo__num{height:64px;margin-bottom:8px}
  .m-fluxo__num>span{font-size:64px}
  .m-fluxo__blocos{min-height:176px}
  .m-fluxo__bloco h3{font-size:30px}
  .m-fluxo__pontos{display:none}
  .m-fluxo__cena{height:100%;min-height:300px;max-height:48vh;width:100%}
  .m-fluxo .url{font-size:clamp(22px,7vw,32px)}
  /* celular: a caixa creme vira faixa de ponta a ponta (o texto mantém a largura de antes) */
  .m-fluxo .m-fluxo__texto{margin:0 calc(var(--margem-m,16px)*-1);padding:18px var(--margem-m,16px) 20px}
}

/* ---------- cases em vitrines (12/10/2026, v4) ---------- */
/* Cada case toma a tela com a cor, a fonte e as peças da própria marca (referência: Giology). Grade comum às três:
   coluna de texto à esquerda (38%), sempre no mesmo lugar e com o mesmo ritmo (nome, descrição, links ou nota);
   cena da marca à direita. A Môni Nova aparece só na etiqueta, no número, no ponto vermelho do canto, na nota manuscrita
   e no canto em arco. As vitrines ficam presas no topo e a seguinte cobre a anterior (--cobre, posto por script).
   Fontes dos clientes ficam só aqui: nunca usar em outra parte do site. */
@font-face{font-family:"Newsreader";src:url(fonts/cases/newsreader-500.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Josefin Sans";src:url(fonts/cases/josefin-var.woff) format("woff");font-weight:100 700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/cases/instrumentserif-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(fonts/cases/intertight-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/cases/ibmplexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}

.m-cases{position:relative}
.m-cases__cab{padding:var(--e7) var(--margem) var(--e5)}
.m-cases__cab .m-rotulo{margin:0 0 var(--e3)}
.m-cases__apoio{margin:var(--e2) 0 0;padding-left:calc(clamp(34px,5vw,56px)*1.1);font-size:clamp(20px,1.9vw,26px);line-height:1.3}

/* faixa dos sotaques: os três nomes, cada um na fonte e na cor da marca, separados pelo ponto vermelho */

/* ----- moldura comum ----- */
.m-vitrines{position:relative}
.vit{--col:38%;position:sticky;top:0;height:100vh;height:100svh;min-height:660px;overflow:hidden;color:var(--vc);
  border-radius:56px 0 0 0;transform:scale(calc(1 - var(--cobre,0)*.05));transform-origin:50% 0}
.vit::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--cobre,0)*.45);pointer-events:none;z-index:20}
.vit__etq{position:absolute;z-index:8;top:var(--e4);left:var(--margem);margin:0;display:flex;gap:3px}
.vit__etq span{padding:8px 13px 6px;background:var(--chip);color:var(--vc);font:600 13px/1.2 var(--f-texto);letter-spacing:.03em;backdrop-filter:blur(8px)}
.vit__etq span:first-child{border-radius:999px 0 0 999px;padding-left:16px}
.vit__etq span:first-child::before{content:"• "}
.vit__etq span:last-child{border-radius:0 999px 999px 0;padding-right:16px}
.vit__n{position:absolute;z-index:8;top:var(--e4);right:var(--margem);margin:0;font:700 28px/1 var(--f-titulo);letter-spacing:-.02em;color:var(--vn,var(--vc))}
.vit__n i{font-style:normal;opacity:.45;font-size:.6em;margin-left:2px}
.vit__assina{position:absolute;z-index:8;right:var(--margem);bottom:var(--e5);width:14px;height:14px;margin:0}
/* coluna de texto: mesmo lugar e mesmo ritmo nas três vitrines */
.vit__txt{position:absolute;z-index:6;left:var(--margem);top:0;bottom:var(--base,0px);width:calc(var(--col) - var(--margem) - 2vw);
  display:flex;flex-direction:column;justify-content:center;gap:var(--e3);padding-top:var(--e7)}
.vit__txt h3{margin:0 0 var(--e1)}
.vit__desc{margin:0;font-size:18px;line-height:1.45;max-width:30ch;text-wrap:pretty}
.vit__links{list-style:none;margin:var(--e1) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e2) var(--e3)}
.vit__links .m-link,.vit__txt .m-link{color:var(--vc);border-color:currentColor;font-size:16px}
.vit__nota{color:var(--vnota,var(--vc));align-self:flex-start;margin-top:var(--e1)}
.vit__palco{position:absolute;inset:0 0 var(--base,0px) 0}
/* títulos dos clientes sobem de uma máscara (só com script) */
.vk{display:block;overflow:hidden;padding-bottom:.06em}
.vk>span{display:block;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.vk+.vk>span{transition-delay:.12s}
.m-cases.anima .vit:not(.on) .vk>span{transform:translateY(108%)}
.m-cases.anima .vit .vit__desc,.m-cases.anima .vit .vit__links,.m-cases.anima .vit .vit__nota{transition:opacity .8s ease .7s,translate .8s cubic-bezier(.2,.7,.2,1) .7s}
.m-cases.anima .vit:not(.on) .vit__desc,.m-cases.anima .vit:not(.on) .vit__links,.m-cases.anima .vit:not(.on) .vit__nota{opacity:0;translate:0 14px}

/* pausa entre vitrines: a vitrine presa fica inteira na tela enquanto a página rola por baixo; só depois a seguinte sobe */
.vit-pausa{height:70vh}
.vit-pausa--longa{height:90vh}
.vit-pausa--hor{height:80vh}   /* 14/10: o Horácio ficava pouco tempo na tela */   /* Adriana: tempo de o site dela rolar inteiro dentro do notebook (era 140vh; 12/10 ela achou longo: mesma velocidade, folga parada menor) */

/* ----- 01 Adriana: só o notebook (foto real) com o site dela rodando; a rolagem da página rola o site ----- */
.vit--adr{--vc:#F5F0EF;--chip:rgba(245,240,239,.14);background:radial-gradient(90% 120% at 70% 40%,#6c2338 0%,#501628 42%,#241017 100%)}
.adr-luz{position:absolute;left:calc(var(--col) + 2vw);right:-4vw;top:8%;bottom:-6%;background:radial-gradient(closest-side,rgba(245,240,239,.16),rgba(245,240,239,0));pointer-events:none}
.adr-wm{margin:0;display:flex;align-items:center;gap:14px;font:500 13px/1 "Newsreader",Georgia,serif;letter-spacing:.42em;opacity:.85}
/* regra da marca da Adriana: o wordmark nunca aparece sem o símbolo (a onda) */
.adr-simbolo{height:30px;width:auto;display:block}
.adr-nome{font:500 clamp(64px,7.6vw,140px)/.92 "Newsreader",Georgia,serif;letter-spacing:-.02em}
.adr-nome .vk>span{background:linear-gradient(180deg,#FFFFFF 10%,#E9E3E1 55%,#B5A4AA 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.adr-nb{position:absolute;z-index:4;left:calc(var(--col) + 1vw);top:50%;translate:0 -50%;width:min(56vw,calc((100vh - 140px)*1.76));
  filter:drop-shadow(0 40px 46px rgba(14,5,9,.6));transition:opacity 1s ease .3s,transform 1.3s cubic-bezier(.2,.7,.2,1) .3s}
.m-cases.anima .vit--adr:not(.on) .adr-nb{opacity:0;transform:translateY(8%)}
.adr-nb__img{display:block;width:100%;height:auto}
.adr-tela{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;transform:var(--m,scale(0));overflow:hidden;background:#F5F0EF}
/* a página do workshop, viva, dentro da tela (1440 x 900); não recebe clique nem rolagem do mouse: quem rola é o site */
.adr-site{display:block;width:1440px;height:900px;border:0;pointer-events:none;background:#F5F0EF}
/* celular: vídeo da página rolando no lugar da página viva (mais leve); no computador ele não aparece */
.adr-video{display:none;position:absolute;inset:0;width:1440px;height:900px;object-fit:cover;background:#F5F0EF}
.adr-tela.com-video .adr-video{display:block}.adr-tela.com-video .adr-site{display:none}   /* o script decide (mesma regra do "mouse": tela larga com mouse = página viva) */
.adr-tela::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 42%);pointer-events:none}

/* ----- 02 Ceranic: o app no centro, as 8 linhas de peças em órbita, o símbolo girando atrás ----- */
.vit--cer{--vc:#F0E8E0;--chip:rgba(240,232,224,.1);--vnota:#F0E8E0;background:#3D2E25}
.cer-nome{font:300 clamp(40px,4.3vw,84px)/1 "Josefin Sans",sans-serif;text-transform:uppercase;letter-spacing:.28em}
.cer-nome small{display:inline-block;margin-top:.8em;padding-top:.8em;border-top:2px solid #B85A1A;font-size:.16em;letter-spacing:.7em;font-weight:300}
.vit--cer .vit__nota{font-size:22px}
.cer-orbita{position:absolute;--o:min(calc(100vh - 120px),58vw);width:var(--o);height:var(--o);left:calc(var(--col) + (100% - var(--col) - var(--o))/4);top:50%;translate:0 -47%}
.cer-centro{position:absolute;left:50%;top:50%;width:62%;translate:-50% -50%;rotate:calc(var(--a,0deg)*-2.2);mix-blend-mode:lighten;opacity:.9}
.cer-anel{position:absolute;inset:0;rotate:var(--a,0deg)}
.cer-anel img{position:absolute;left:50%;top:50%;width:23%;margin:-11.5% 0 0 -11.5%;mix-blend-mode:lighten;
  transform:rotate(calc(var(--i)*45deg)) translate(calc(var(--o)*.41)) rotate(calc(var(--i)*-45deg)) rotate(calc(var(--a,0deg)*-1));
  transition:opacity .7s ease calc(.25s + var(--i)*.08s),scale .9s var(--quica) calc(.25s + var(--i)*.08s)}
.m-cases.anima .vit--cer:not(.on) .cer-anel img{opacity:0;scale:.4}
/* o app: a tela do celular troca sozinha, como alguém usando (pedidos, um pedido, painel, clientes, financeiro) */
.cer-app{position:absolute;z-index:2;left:50%;top:50%;height:66%;aspect-ratio:463/914;translate:-50% -50%;
  filter:drop-shadow(0 36px 40px rgba(14,9,6,.55));transition:opacity 1s ease .2s,transform 1.2s var(--quica) .2s}
/* celular frontal (Magnific, 12/10); as telas do app ficam dentro do vidro dele */
.cer-cel{position:absolute;inset:0;width:100%;height:100%;display:block}
.cer-tela{position:absolute;left:7.34%;top:2.74%;width:86.18%;height:93%;border-radius:12% / 5.8%;overflow:hidden;background:#F3ECE4}
.m-cases.anima .vit--cer:not(.on) .cer-app{opacity:0;transform:translateY(14%) scale(.92)}
.cer-tela img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;animation:app-tela 20s infinite;animation-delay:calc(var(--k)*4s)}
.cer-tela img:first-child{opacity:1}
@keyframes app-tela{0%{opacity:0;transform:translateX(8%)}3%{opacity:1;transform:none}20%{opacity:1;transform:none}23%{opacity:0;transform:translateX(-6%)}100%{opacity:0}}

/* ----- 03 Horácio (v6, 12/10): composição livre, sem moldura, com balanço. Cada peça tem data-aj
   e aceita mover, girar e aumentar no modo ajuste (?ajuste=1); os valores gravados ficam nas variáveis --aj-* ----- */
.vit--hor{--vc:#2A1F18;--chip:rgba(42,31,24,.08);--vnota:#1E1B18;background:#F4F2ED}
.hor-nome{font:400 clamp(72px,8.4vw,156px)/.88 "Instrument Serif",Georgia,serif;letter-spacing:-.02em}
.hor-nome .vk+.vk{padding-left:.5em}
.aj-livre{rotate:var(--aj-r);scale:var(--aj-s)}
[data-aj]{--aj-r:0deg;--aj-s:1}
.hz{position:absolute;inset:0}
.hz>*{position:absolute;margin:0}
.hz-in{display:block;width:100%}
/* ----- Horácio: entrada (12/10; 14/10 tudo 1,5x mais lento, a pedido dela: "os efeitos estão muito rápidos"). Uma ideia por peça, em ritmo sincopado (bossa): a foto se abre de cima para baixo,
   a quadra entra balançando, a colagem desliza com desfoque, o prédio sobe como obra, a bola quica, as cores entram
   como notas e o "Aa" sobe da linha. Toca uma vez, quando a vitrine aparece. Depois, profundidade leve com o mouse. ----- */
.m-cases.anima .vit--hor:not(.on) .hz-terno .hz-in,.m-cases.anima .vit--hor:not(.on) .hz-quadra .hz-in,.m-cases.anima .vit--hor:not(.on) .hz-efeitos .hz-in,
.m-cases.anima .vit--hor:not(.on) .hz-predio .hz-in,.m-cases.anima .vit--hor:not(.on) .hz-bola .hz-in,
.m-cases.anima .vit--hor:not(.on) .hz-paleta span,.m-cases.anima .vit--hor:not(.on) .hz-tipo .aa,.m-cases.anima .vit--hor:not(.on) .hz-tipo .fs{opacity:0}
.m-cases.anima .vit--hor.on .hz-terno .hz-in{animation:hz-cortina 2.1s cubic-bezier(.77,0,.175,1) backwards}
.m-cases.anima .vit--hor.on .hz-quadra .hz-in{transform-origin:50% 0;animation:hz-balanca 2.4s cubic-bezier(.22,1,.36,1) 0.38s backwards}
.m-cases.anima .vit--hor.on .hz-efeitos .hz-in{animation:hz-desliza 1.8s cubic-bezier(.23,1,.32,1) 0.75s backwards}
.m-cases.anima .vit--hor.on .hz-predio .hz-in{animation:hz-obra 2.55s cubic-bezier(.77,0,.175,1) 1.05s backwards}
.m-cases.anima .vit--hor.on .hz-bola .hz-in{transform-origin:50% 100%;animation:hz-quica 2.25s 1.58s backwards}
.m-cases.anima .vit--hor.on .hz-paleta span{animation:hz-nota 1.2s cubic-bezier(.34,1.56,.64,1) backwards}
.m-cases.anima .vit--hor.on .hz-paleta span:nth-child(1){animation-delay:1.2s}
.m-cases.anima .vit--hor.on .hz-paleta span:nth-child(2){animation-delay:1.38s}
.m-cases.anima .vit--hor.on .hz-paleta span:nth-child(3){animation-delay:1.71s}
.m-cases.anima .vit--hor.on .hz-paleta span:nth-child(4){animation-delay:1.8s}
.m-cases.anima .vit--hor.on .hz-paleta span:nth-child(5){animation-delay:2.13s}
.m-cases.anima .vit--hor.on .hz-tipo .aa{animation:hz-sobe 1.65s cubic-bezier(.23,1,.32,1) 1.5s backwards}
.m-cases.anima .vit--hor.on .hz-tipo .fs{animation:hz-aparece 1.35s ease-out 2.03s backwards}
@keyframes hz-cortina{from{clip-path:inset(0 0 100% 0);transform:scale(1.05)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes hz-balanca{0%{opacity:0;transform:translateY(-5%) rotate(9deg)}45%{opacity:1;transform:translateY(0) rotate(-2.5deg)}70%{transform:rotate(1.2deg)}86%{transform:rotate(-.4deg)}100%{transform:none}}
@keyframes hz-desliza{from{opacity:0;filter:blur(8px);transform:translateX(16%) rotate(7deg)}to{opacity:1;filter:none;transform:none}}
@keyframes hz-obra{from{clip-path:inset(100% -20% 0 -20%);transform:translateY(5%)}to{clip-path:inset(-10% -20% 0 -20%);transform:none}}
@keyframes hz-quica{
  0%{opacity:0;transform:translateY(-90%);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  10%{opacity:1}
  36%{transform:translateY(0) scale(1.07,.9);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  56%{transform:translateY(-22%) scale(.98,1.02);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  74%{transform:translateY(0) scale(1.03,.96);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  87%{transform:translateY(-6%);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{transform:none}}
@keyframes hz-nota{from{opacity:0;transform:translateY(18px) scale(.6)}to{opacity:1;transform:none}}
@keyframes hz-sobe{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(35%)}to{opacity:1;clip-path:inset(-20% -10% -20% -10%);transform:none}}
@keyframes hz-aparece{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* profundidade com o mouse (o script põe --mx e --my entre -1 e 1); cada peça tem sua distância */
.hz-terno{--dp:6}.hz-quadra{--dp:11}.hz-efeitos{--dp:16}.hz-predio{--dp:20}.hz-bola{--dp:4}.hz-paleta{--dp:13}.hz-tipo{--dp:8}
.hz-pronto .hz-in{transform:translate3d(calc(var(--mx,0) * var(--dp) * 1px),calc(var(--my,0) * var(--dp) * 1px),0)}
/* pôsteres sem moldura: contorno sinuoso (máscara) e papel do pôster some no fundo giz */
.hz-peca img{height:auto;mix-blend-mode:multiply}
.hz-terno{left:39%;top:9%;width:min(25vw,54vh);z-index:3;--aj-r:-3deg}
.hz-quadra{left:58%;top:24%;width:min(24vw,50vh);z-index:4;--aj-r:4deg}
.hz-efeitos{left:70%;top:54%;width:min(18vw,38vh);z-index:5;--aj-r:-5deg}
.hz-bola{left:77%;top:70%;width:min(8vw,17vh);z-index:6;--aj-r:-8deg}
.hz-predio{left:84%;top:12%;width:min(12vw,26vh);z-index:2;--aj-r:2deg;aspect-ratio:1000/1289}
/* a imagem do prédio é mais larga que a caixa (as folhas das bordas não cortam); a caixa continua a mesma, então o prédio não sai do lugar */
.hz-predio img{position:absolute;left:-6.5%;top:0;width:119.5%;max-width:none}
.hz-quadra img,.hz-efeitos img,.hz-bola img,.hz-predio img{mix-blend-mode:normal}
/* ajustes da Mônica no modo ajuste (12/10, tela de 1482 x 734), gravados como padrão; deslocamento em vw/vh para acompanhar a tela */
@media (min-width:821px){
  [data-aj="hor-terno"]{--aj-x:-1.75vw;--aj-y:5.59vh;--aj-r:-3deg;--aj-s:1.15;z-index:2;opacity:1}
  [data-aj="hor-quadra"]{--aj-x:0.00vw;--aj-y:-2.04vh;--aj-r:4deg;--aj-s:1;z-index:3;opacity:1}
  [data-aj="hor-efeitos"]{--aj-x:-11.13vw;--aj-y:-12.26vh;--aj-r:-21deg;--aj-s:1.02;z-index:4;opacity:1}
  [data-aj="hor-predio"]{--aj-x:-21.73vw;--aj-y:51.23vh;--aj-r:2deg;--aj-s:1;z-index:7;opacity:1}
  [data-aj="hor-bola"]{--aj-x:-3.04vw;--aj-y:-8.99vh;--aj-r:-6deg;--aj-s:3.59;z-index:1;opacity:0.5}
  [data-aj="hor-paleta"]{--aj-x:-2.43vw;--aj-y:2.59vh;--aj-r:0deg;--aj-s:1.7;z-index:5;opacity:1}
  [data-aj="hor-tipo"]{--aj-x:-3.98vw;--aj-y:-0.27vh;--aj-r:0deg;--aj-s:0.95;z-index:6;opacity:1}
}
/* paleta: bolinhas em onda, como notas numa pauta */
.hz-paleta{left:67%;top:9%;z-index:5}
.hz-paleta .hz-in{display:flex;align-items:center;gap:14px}
.hz-paleta span{display:flex;flex-direction:column;align-items:center;gap:7px;translate:0 var(--y);font:400 10px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.12em;color:#2A1F18}
.hz-paleta i{display:block;width:var(--d);height:var(--d);border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(42,31,24,.14)}
/* tipografia solta, sem caixa */
.hz-tipo{left:40%;top:77%;z-index:5;color:#2A1F18}
.hz-tipo .aa{margin:0;font:400 clamp(64px,6vw,110px)/.8 "Instrument Serif",Georgia,serif}
.hz-tipo .fs{margin:10px 0 0 .4em;display:flex;gap:16px;flex-wrap:wrap;align-items:baseline}
.hz-tipo .f1{font:400 19px/1 "Instrument Serif",Georgia,serif}
.hz-tipo .f2{font:400 14px/1 "Inter Tight",sans-serif}
.hz-tipo .f3{font:400 12px/1 "IBM Plex Mono",monospace}

/* cursor próprio: círculo com "+" na cor de cada marca; cresce em link; some na foto que revela */
.vit-cursor{position:fixed;left:0;top:0;z-index:50;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;pointer-events:none;
  font:400 28px/1 var(--f-titulo);opacity:0;scale:.4;transition:opacity .15s ease,scale .3s var(--quica),background .3s ease}
.vit-cursor.on{opacity:1;scale:1}
.vit-cursor.grande{scale:1.5}
.vit-cursor.some{opacity:0}
.vit-cursor[data-marca="adr"]{background:#F5F0EF;color:#501628}
.vit-cursor[data-marca="cer"]{background:#B85A1A;color:#F0E8E0}
.vit-cursor[data-marca="hor"]{background:#1F3A2E;color:#F4F2ED}
.cursor-proprio .vit{cursor:none}
.cursor-proprio .vit a,.cursor-proprio .vit button{cursor:pointer}
.cursor-proprio .hor-revela{cursor:crosshair}

/* ----- celular e tablet estreito: vitrines uma embaixo da outra, sem prender, texto em cima e cena embaixo ----- */
@media (max-width:820px){
  .m-cases__cab{padding:var(--e6) var(--e2) var(--e4)}
  .vit-pausa{display:none}
  .vit{--col:100%;position:relative;height:auto;min-height:0;border-radius:36px 0 0 0;transform:none;display:flex;flex-direction:column}
  .vit::after{display:none}
  .vit__etq{top:var(--e3);left:var(--e2);flex-wrap:wrap}
  .vit__etq span{font-size:12px;padding:7px 10px 5px}
  .vit__n{top:var(--e3);right:var(--e2);font-size:22px}
  .vit__txt{position:relative;left:auto;top:auto;bottom:auto;width:auto;order:1;padding:96px var(--e2) var(--e4)}
  .vit__palco{position:relative;inset:auto;order:2}
  .vit__assina{bottom:var(--e3);right:var(--e2)}
  /* Adriana: o site rola sozinho no celular */
  /* 12/10: palco mais baixo para o notebook subir para perto dos links (ficava muito embaixo) */
  .vit--adr .vit__palco{height:62vw;min-height:0;margin-top:calc(var(--e2)*-1)}
  .adr-luz{left:0;right:0;top:0}
  .adr-nb{left:2vw;top:auto;bottom:3%;translate:none;width:96vw}
  .adr-nome{font-size:clamp(56px,16vw,92px)}
  /* Ceranic */
  .vit--cer .vit__palco{height:104vw}
  .cer-orbita{--o:96vw;left:2vw;top:50%}
  .cer-nome{font-size:clamp(34px,10vw,56px);letter-spacing:.24em}
  /* Horácio: peças empilhadas, mas sobrepostas e giradas (sem grade) */
  .vit--hor .vit__palco{height:auto;padding:0 var(--e2) var(--e6)}
  .hz{position:relative;inset:auto}
  .hz>*{position:relative;left:auto;top:auto}
  [data-aj^="hor-"]{--aj-x:0px!important;--aj-y:0px!important;--aj-s:1!important}
  .hz-terno{width:80vw;--aj-r:-2deg!important}
  .hz-quadra{width:84vw;margin:-22vw 0 0 auto;--aj-r:4deg!important}
  .hz-efeitos{width:66vw;margin:-10vw 0 0 6vw;--aj-r:-5deg!important}
  /* 12/10: prédio NA FRENTE da colagem (ela viu ele por baixo) e a bola encostada no canto da colagem, ao lado do prédio (estava isolada) */
  .hz-predio{width:46vw;margin:-26vw 0 0 0;z-index:7;--aj-r:2deg!important}
  .hz-bola{width:28vw;margin:-40vw 4vw calc(18vw + var(--e3)) auto;z-index:6;--aj-r:-8deg!important}   /* margem de baixo: a bola termina antes do prédio, a paleta precisa esperar o prédio acabar */
  .hz-paleta{margin:var(--e4) 0 0 4vw}
  .hz-tipo{margin:var(--e4) 0 0 2vw}
  .hor-nome{font-size:clamp(64px,19vw,110px)}
  /* 12/10: no celular as peças ficam bem abaixo do topo da vitrine e a entrada acabava antes de alguém ver.
     Cada peça fica parada no primeiro quadro até ela mesma aparecer na tela (o script põe .entra) */
  .m-cases.anima .vit--hor .hz>*:not(.entra) .hz-in,.m-cases.anima .vit--hor .hz>*:not(.entra) .hz-in *{animation-play-state:paused}
}

@media (prefers-reduced-motion:reduce){
  .cer-tela img{animation:none}
  .vk>span,.hz-in,.adr-nb,.cer-anel img,.cer-app{transition:none}
}

/* ---------- layout ---------- */
.m-container{max-width:1160px;margin:0 auto;padding:0 var(--e5)}
.m-secao{padding:var(--e7) 0}
@media (max-width:820px){
  .m-container{padding:0 var(--e2)}
  .m-secao{padding:var(--e6) 0}
  .m-nav{padding:var(--e2)}
  .m-hero{--t:clamp(30px,10.2vw,48px);grid-template-columns:1fr;min-height:0}
  .m-hero__texto{padding:var(--e5) var(--e2) var(--e6);transform:none}
  .m-hero__apoio,.m-hero__acao{padding-left:0}
  .m-so-desk{display:none}
  .m-grade i.m-grade__v{display:none}  /* "i.m-grade__v" porque ".m-grade i" (display:block) tinha mais peso e a linha continuava aparecendo no celular */
  .m-hero__texto>.m-grade__h{margin-right:0}
  .m-hero{margin-bottom:var(--e6)}
  .m-notebook{width:84%;left:-4%;bottom:-70px;rotate:4deg;animation-delay:.55s,2s}  /* quando a colagem só aparece ao rolar */
  .m-colagem{margin:0;min-height:0;aspect-ratio:1/1.1}
  .m-colagem__arte{right:-6%;top:-4%;height:100%}
  .m-colagem__disco{right:auto;left:-12%;top:-12%;width:62%}  /* no celular a pintura ocupa quase toda a largura: o disco vai para a esquerda e fica meio atrás da borda dela (antes ficava todo escondido) */
  .m-hero__foto{margin:0;min-height:0;aspect-ratio:4/5}
  .m-nav ul li:not(:last-child):not(.m-nav__menu){display:none}
  .m-sincope{grid-template-columns:1fr}
  .m-sincope>*{margin-top:0!important}
  .m-secao--larga{padding:var(--e6) var(--e2)}
  .m-passos{grid-template-columns:1fr;gap:var(--e5);margin-top:var(--e6)}
  .m-passo:nth-child(n){margin-top:0}
  .m-passos-fim{margin-top:var(--e6)}
}
@media (min-width:821px) and (max-width:1100px){
  .m-passos{grid-template-columns:repeat(2,1fr);row-gap:var(--e6)}
  .m-passo:nth-child(3){margin-top:0}
  .m-passo:nth-child(4){margin-top:44px}
}
@media (prefers-reduced-motion:reduce){
  .m-ponto--quica,.m-btn:hover i,.m-link:hover::after{animation:none}
  .m-hero .m-titulo .l,.m-hero__apoio,.m-hero__acao{animation:none}
  .m-notebook,.m-colagem__disco,.m-colagem__arte{animation:none}
  .m-notebook__par{transform:none;transition:none}
  .m-grade__h,.m-grade__v{animation:none}
  .m-btn{transition:none}
  .m-passo::before,.m-passo>*{transition:none!important}
  .m-passos .m-ponto--chega{animation:none!important}
}


/* ===== SERVIÇOS (aprovada em 14/10/2026) =====
   Mecânica das fichas da Giology com as formas do logo: cada serviço é uma lombada em arco (a porta), com o nome na vertical;
   no clique ela cresce até virar o painel e as formas da composição do serviço saem de dentro dela.
   Entrada: as lombadas sobem do chão fora do tempo e a 01 se abre. Cursor: a forma perto do mouse foge e volta com quique.
   EXCEÇÃO DE PALETA SÓ NESTA SEÇÃO: rosa, laranja, azul de azulejo e mostarda (pedido da Mônica, ainda não registrado no DNA).
   O vermelho da marca continua só no ponto do título e no botão. Textos revisados na auditoria final. */
.sv{--rosa:#E87FB1;--laranja:#EB6B1C;--azul:#1E3A8A;--mostarda:#EDA93C;
  --lomb:96px;--sob:26px;padding:var(--e7) var(--margem) var(--e8)}
.sv-cab{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--e6);align-items:end;margin-bottom:var(--e6)}
.sv-cab .m-rotulo{display:block;margin-bottom:var(--e3)}
.sv-cab p{margin:0;font-size:20px;max-width:30ch}

/* a fileira de fichas */
.fi-fila{display:flex;align-items:flex-end;height:clamp(640px,88vh,720px);container-type:inline-size}
.fi{position:relative;flex:0 0 var(--lomb);height:var(--h);background:var(--c);color:var(--t);overflow:hidden;
  border-radius:calc(var(--lomb)/2) calc(var(--lomb)/2) 0 0;
  transition:flex-grow .8s cubic-bezier(.65,0,.35,1),height .9s var(--quica),border-radius .8s cubic-bezier(.65,0,.35,1),translate .5s var(--quica)}
.fi+.fi{margin-left:calc(var(--sob) * -1)}
.fi.on{flex-grow:1;height:100%;border-radius:calc(var(--lomb)/2) 280px 0 0}
/* alturas fora do compasso (síncope) */
.fi-0{--c:var(--laranja);--t:var(--pq);--h:100%}
.fi-1{--c:var(--azul);--t:var(--bq);--h:93%}
.fi-2{--c:var(--rosa);--t:var(--pq);--h:97%}
.fi-3{--c:var(--mostarda);--t:var(--pq);--h:89%}
.fi:not(.on):hover{translate:0 -10px}

/* lombada: número em cima, nome na vertical embaixo */
.fi-lomb{all:unset;box-sizing:border-box;position:absolute;inset:0 auto 0 0;width:var(--lomb);cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:calc(var(--lomb)/2 + 8px) 0 var(--e4);
  transition:opacity .4s ease .55s}   /* o nome volta só quando a forma já encolheu */
.fi-1 .fi-lomb,.fi-2 .fi-lomb,.fi-3 .fi-lomb{padding-left:var(--sob)}   /* a parte coberta pela ficha anterior não conta */
.fi-lomb:focus-visible{outline:2px solid var(--t);outline-offset:-8px}
.fi-n{font:600 14px/1 var(--f-texto);letter-spacing:.08em}
.fi-nv{writing-mode:vertical-rl;rotate:180deg;font-family:var(--f-titulo);font-weight:700;font-size:30px;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.fi.on .fi-lomb{opacity:0;pointer-events:none;transition:opacity .2s ease}

/* painel aberto: largura fixa (não reflui enquanto a forma cresce) */
.fi-corpo{position:absolute;top:0;bottom:0;left:0;width:calc(100cqw - 3 * (var(--lomb) - var(--sob)));
  padding:var(--e5) 0 var(--e4) var(--e6);visibility:hidden;opacity:0;transition:opacity .25s ease,visibility 0s .25s}
.fi-1 .fi-corpo,.fi-2 .fi-corpo,.fi-3 .fi-corpo{padding-left:calc(var(--e6) + var(--sob))}
.fi.on .fi-corpo{visibility:visible;opacity:1;transition:opacity .5s ease .35s,visibility 0s}
.fi-txt{position:relative;z-index:1;max-width:min(500px,52%)}
.fi-topo{display:flex;gap:var(--e3);align-items:baseline;font:600 14px/1 var(--f-texto);letter-spacing:.08em;margin-bottom:var(--e2)}
.fi-topo b{font-weight:600;letter-spacing:0;font-size:15px;padding:7px 14px;border:1px solid currentColor;border-radius:4px var(--raio-pilula) var(--raio-pilula) var(--raio-pilula)}
.fi-nome{font-family:var(--f-titulo);font-weight:700;font-size:clamp(44px,4.6vw,72px);line-height:.98;letter-spacing:-.025em;margin:0 0 var(--e2)}
.fi-pra{margin:0 0 var(--e2);font-size:18px;line-height:1.4;max-width:38ch}
.fi-ent{list-style:none;margin:0;padding:0}
.fi-ent li{overflow:hidden;border-top:1px solid color-mix(in srgb,var(--t) 30%,transparent);font-size:16px;line-height:1.3}
.fi-ent li span{display:block;padding:8px 0;translate:0 105%;transition:translate .7s cubic-bezier(.2,.7,.2,1)}
.fi.on .fi-ent li span{translate:0 0;transition-delay:calc(.55s + var(--k) * .07s)}

/* as formas da composição saem de dentro da lombada */
.fi-cartaz{position:absolute;right:6%;bottom:-2%;width:min(36%,360px);aspect-ratio:4/5}
.fi-palco{position:absolute;inset:0;animation:sv-balanca 7s ease-in-out infinite alternate;transform-origin:50% 90%}
@keyframes sv-balanca{from{rotate:-.8deg}to{rotate:.8deg}}   /* balanço lento, de bossa */
.fi-f{position:absolute;display:block;left:var(--x);top:var(--y);width:var(--w);rotate:var(--r,0deg);background:var(--k);
  translate:-140% 30%;scale:.15;opacity:0;
  transition:translate .2s ease,scale .2s ease,opacity .15s ease}
.fi.on .fi-f{translate:0 0;scale:1;opacity:1;
  transition:translate 1.1s var(--quica) var(--d),scale .9s var(--quica) var(--d),opacity .3s ease var(--d)}
.sv .cup{aspect-ratio:2/1;border-radius:999px 999px 0 0}
.sv .disco{aspect-ratio:1;border-radius:50%}
.sv .porta{aspect-ratio:.62/1;border-radius:999px 999px 0 0}
.sv .haste{aspect-ratio:1/7}
.sv .k-rosa{--k:var(--rosa)}.sv .k-laranja{--k:var(--laranja)}.sv .k-azul{--k:var(--azul)}.sv .k-mostarda{--k:var(--mostarda)}.sv .k-pq{--k:var(--pq)}
/* a forma da mesma cor do painel vira branco queimado */
.fi-0 .k-laranja,.fi-1 .k-azul,.fi-2 .k-rosa,.fi-3 .k-mostarda{--k:var(--bq)}

.sv-fecho{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--e5);align-items:center;margin-top:var(--e7)}
.sv-fecho p{margin:0;font-size:17px}

/* celular: as fichas empilham; cada lombada é um arco deitado com o nome na horizontal */
@media (max-width:820px){
  .sv{padding:var(--e6) var(--e2);--lomb:72px;--sob:22px}
  .sv-cab,.sv-fecho{grid-template-columns:1fr;gap:var(--e4)}
  .fi-fila{flex-direction:column;align-items:stretch;height:auto;container-type:normal}
  .fi,.fi.on{flex:none;height:auto;border-radius:calc(var(--lomb)/2) calc(var(--lomb)/2) 0 0;margin-left:0!important}
  .fi+.fi{margin-top:calc(var(--sob) * -1)}
  .fi.on{border-radius:calc(var(--lomb)/2) 120px 0 0}
  .fi:not(.on):hover{translate:none}
  .fi-lomb{position:relative;width:100%;height:var(--lomb);flex-direction:row;justify-content:flex-start;gap:var(--e3);padding:0 var(--e3)!important;align-items:center}
  .fi-nv{writing-mode:horizontal-tb;rotate:0deg;font-size:24px}
  .fi.on .fi-lomb{height:0;opacity:0}
  .fi-corpo{position:relative;width:auto;padding:0!important;display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s cubic-bezier(.2,.7,.2,1),opacity .25s,visibility 0s .7s}
  .fi.on .fi-corpo{grid-template-rows:1fr}
  .fi-corpo>div{overflow:hidden;min-height:0}
  .fi-in{padding:var(--e5) var(--e3) calc(var(--e4) + var(--sob))}
  .fi-txt{max-width:none}
  .fi-cartaz{position:relative;right:auto;bottom:auto;width:62%;margin:0 0 var(--e3) auto}
  .fi:last-child .fi-in{padding-bottom:var(--e4)}
}
/* ENTRADA (escolhida em 14/10): a seção começa com tudo fechado; quando a fileira chega na tela, as lombadas sobem do chão
   fora do tempo (síncope), a 01 por último, e ela se abre */
.fi-0{--ed:.32s}.fi-1{--ed:0s}.fi-2{--ed:.18s}.fi-3{--ed:.08s}
.sv.antes .fi{transition:none!important;translate:0 115%}
.sv.antes .fi-fila,.sv.entrando .fi-fila{overflow:hidden}
.sv.entrando .fi{transition-property:translate,flex-grow,height,border-radius;transition-duration:1s,.8s,.9s,.8s;
  transition-delay:var(--ed),0s,0s,0s;transition-timing-function:var(--quica),cubic-bezier(.65,0,.35,1),var(--quica),cubic-bezier(.65,0,.35,1)}
/* CURSOR (escolhido em 14/10): depois que as formas assentam, a forma perto do mouse se afasta e volta com quique (só computador) */
.fi.vivo .fi-f{transition:none}
@media (prefers-reduced-motion:reduce){.fi-palco{animation:none}.fi,.fi-f,.fi-corpo,.fi-ent li span{transition:none!important}}

/* ===== SOBRE (aprovada em 14/10/2026: teste 6, rastro + varal; substitui a grade de 8 fotos) =====
   Dois tempos. 1: "Eu e o que eu coleciono." com as 7 fotos do repertório em rastro seguindo o mouse, sem legenda,
   cada foto num tamanho; antes do primeiro movimento, e no celular, o rastro passeia sozinho.
   2: apresentação, texto em Instrument Sans à esquerda e o retrato dela à direita, pendurado num fio fino (varal):
   balanço calmo, o mouse passa como brisa, dá para puxar. O texto entra linha por linha, "Sei escolher." grande com o ponto que quica e a nota manuscrita se escreve embaixo do retrato (A + C, 14/10; js/sobre.js).
   Fotos com o tratamento da paleta B (pecas/tratamento-foto/tratamento-b.py); retrato só com o fundo trocado.
   A grade antiga e a Repeating Image Transition ficaram guardadas em diario/2026-10-14/sobre/grade-repeating-image/. */
.so{padding:0 var(--margem);overflow-x:clip}   /* o retrato balança perto da borda: corta o excesso na lateral sem criar rolagem */
/* tempo 1: rastro */
.so-ra{position:relative;height:clamp(520px,84vh,760px);overflow:hidden;cursor:crosshair}
.so-ra__cab{position:absolute;left:0;top:var(--e7);z-index:30;pointer-events:none}
.so-ra__cab .m-rotulo{display:block;margin-bottom:var(--e3)}
.so-ra__dica{position:absolute;right:0;bottom:var(--e4);margin:0;font:600 13px/1 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--apoio);pointer-events:none}
.so-ra__f{position:absolute;left:0;top:0;width:calc(clamp(120px,13vw,190px) * var(--k,1));margin:0;pointer-events:none;will-change:transform,opacity}   /* cada foto num tamanho */
.so-ra__f img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raio-foto);box-shadow:0 14px 28px rgba(30,27,24,.18)}
/* tempo 2: apresentação no varal */
.so-ap{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--e6);padding:var(--e3) 0 var(--e8);min-height:90vh;align-items:start;align-content:start}
.so-ap__fio{position:absolute;left:calc(var(--margem) * -1);top:var(--e4);height:140px;width:calc(100% + var(--margem) * 2);pointer-events:none;overflow:visible}
.so-ap__pin{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--pq);translate:-50% -50%;z-index:3;pointer-events:none}
.so-ap__foto{position:absolute;left:0;top:0;width:clamp(250px,25vw,370px);margin:0;cursor:grab;touch-action:none;user-select:none;z-index:2;will-change:transform}
.so-ap__foto.puxando{cursor:grabbing}
.so-ap__foto img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raio-foto);box-shadow:0 18px 34px rgba(30,27,24,.18);pointer-events:none;-webkit-user-drag:none}
.so-ap__lugar{height:calc(clamp(250px,25vw,370px) * 1.25 + 220px)}   /* reserva o espaço da foto pendurada e da nota embaixo dela */
.so-ap__texto{align-self:center;padding-top:20px;display:grid;gap:var(--e4)}   /* centro do texto na altura do centro do retrato (14/10: estava muito pra cima) */
.so-ap__texto p{margin:0;font-family:var(--f-texto);font-weight:400;font-size:clamp(21px,2vw,30px);line-height:1.38;max-width:28em}   /* Instrument Sans, para não competir com os títulos em Bricolage */
.so-ap__texto .so-ap__abre{font-weight:600}
/* "Sei escolher." grande, com o ponto vermelho que quica (escolhido em 14/10, opção C) */
.so-ap__texto .so-sei{margin:calc(var(--e2) * -1) 0 0;font-family:var(--f-titulo);font-weight:700;font-size:clamp(48px,5.4vw,84px);line-height:.98;letter-spacing:-.025em}
.so-ap__texto .so-sei:first-child{margin-top:0}   /* 18/10: "Sei escolher." virou a primeira linha do Sobre (saiu "Não sei desenhar..."), sem o recuo para cima */
/* o texto entra linha por linha quando aparece (mesma entrada dos títulos); o script quebra as linhas */
.so-lin{display:block}
.so-ap__texto.espera .so-lin,.so-ap__texto.espera .so-sei,.so-ap__texto.espera .so-sei .m-ponto{opacity:0}
.so-ap__texto.on .so-lin,.so-ap__texto.on .so-sei{animation:m-entra .8s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.so-ap__texto.on .so-sei .m-ponto{animation:m-quica 1.1s var(--quica) var(--dp,.8s) both}
/* dica do varal (14/10, pedido dela): em cima do fio, ao lado do pino, como o "Mexa o mouse" do rastro; some depois do primeiro puxão */
.so-ap__dica{position:absolute;left:0;top:0;z-index:3;margin:0;font:600 13px/1 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--apoio);
  white-space:nowrap;pointer-events:none;transition:opacity .6s ease}
.so-ap__dica.some{opacity:0}
/* nota manuscrita embaixo do retrato: se escreve quando o cursor passa na foto; no toque, quando a foto aparece (opção A, 14/10) */
.so-nota{position:absolute;left:0;top:0;z-index:4;white-space:nowrap;pointer-events:none;opacity:0;font-size:clamp(26px,2.4vw,34px)}
.so-nota.escreve{animation:m-escreve 1.3s cubic-bezier(.45,.05,.35,1) both}
@media (hover:none){
  .so-ra__dica{display:none}   /* no toque não tem mouse: o rastro passeia sozinho */
  .so-ap__foto{touch-action:pan-y}   /* dedo na vertical rola a página; puxar de lado continua balançando o retrato */
}
@media (max-width:820px){
  .so{padding:0 var(--e2)}
  .so-ra{height:82vh}.so-ra__cab{top:var(--e5)}.so-ra__f{width:calc(118px * var(--k,1))}.so-ra__dica{bottom:var(--e3)}
  .so-ap{grid-template-columns:1fr;gap:0;padding-top:var(--e5)}
  .so-ap__fio{left:calc(var(--e2) * -1);width:calc(100% + var(--e2) * 2)}
  .so-ap__foto{width:230px}.so-ap__lugar{height:calc(230px * 1.25 + 170px);order:-1}   /* no celular a foto vem antes do texto */
  .so-ap__texto{padding-top:var(--e4)}
}
@media (prefers-reduced-motion:reduce){.so-ap__texto .so-lin,.so-ap__texto .so-sei,.so-ap__texto .m-ponto{animation:none!important;opacity:1!important}.so-nota{opacity:1}}

/* ===== CONTATO (aprovado em 14/10/2026) =====
   Decidido em 11/10: as formas do logo caem com física e se empilham embaixo; o mouse passa como sopro e espalha as peças
   (referência: contato da Lusion). Frase "Manda um oi, e a gente põe o seu trabalho no ar." em Bricolage enorme, com o ponto
   que quica; um botão vermelho do WhatsApp e a nota manuscrita. Fundo claro (escolha dela; o escuro foi testado e descartado).
   Física própria e leve em js/contato.js (canvas, sem biblioteca); uma só forma vermelha no meio da pilha. Textos provisórios. */
.ct{position:relative;min-height:max(640px,94svh);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding:var(--e5) var(--margem) 0}
.ct__formas{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}
.ct__conteudo{position:relative;z-index:1;pointer-events:none}   /* o mouse passa pelo texto e chega às peças */
.ct__conteudo .m-rotulo{display:block;margin-bottom:var(--e3)}
.ct__frase{font-size:clamp(46px,7vw,116px);line-height:1.02}
.ct__frase .l2{padding-left:1.2em}
.ct-fim{white-space:nowrap}   /* o ponto vermelho nunca cai sozinho na linha de baixo */
.ct-q{display:none}
.ct__acao{display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap;margin-top:var(--e6)}
.ct__acao .m-btn{pointer-events:auto}
@media (max-width:820px){
  .ct{padding:var(--e5) var(--e2) 0}
  .ct__frase{font-size:clamp(40px,11.4vw,64px)}
  .ct-q{display:block}   /* no celular: "Manda um oi," / "e a gente" / "põe o seu trabalho no ar." */
  .ct__frase .l2{padding-left:.5em}
  .ct__acao{gap:var(--e3);margin-top:var(--e4)}
}

/* ===== HORÁCIO: O OUTRO LADO (14/10/2026) =====
   No pôster de terno, o mouse abre um círculo que mostra o Horácio tocando baixo (a metáfora da marca dele: o baixo segura
   a música sem aparecer). O círculo segue o mouse e cresce devagar; no toque, um toque troca a foto inteira. Script (6) dos cases. */
.hor-revela .hz-in{position:relative;mix-blend-mode:multiply}   /* a mistura com o fundo giz passa para a caixa (com a foto dentro, a mistura na foto não alcançaria o fundo) */
.hor-revela .hz-in>img{display:block;width:100%;mix-blend-mode:normal}
.hor-revela .hz-in>.hz-baixo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:circle(var(--rr,0px) at var(--rx,50%) var(--ry,50%));pointer-events:none}
.hor-revela.troca .hz-baixo{clip-path:circle(75% at 50% 50%);transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
.hor-revela:not(.troca) .hz-baixo{transition:none}
@media (prefers-reduced-motion:reduce){.hor-revela.troca .hz-baixo{transition:none}}
/* dica (14/10, pedido dela: no celular nada indicava a troca). Pílula no estilo das etiquetas da moldura, um canto reto;
   no computador "Passe o mouse na foto", no toque "Toque na foto"; some depois da primeira vez. */
.hor-dica{position:absolute;left:14px;top:14px;z-index:5;padding:8px 14px 6px;border-radius:4px 999px 999px 999px;background:#F4F2ED;color:var(--vc);   /* giz da paleta dele: sobre a foto, o tom transparente das etiquetas sumia */
  
  font:600 13px/1.2 var(--f-texto);letter-spacing:.03em;backdrop-filter:blur(8px);pointer-events:none;transition:opacity .5s ease}
.hor-dica .so-toque{display:none}
@media (hover:none),(max-width:820px){.hor-dica .so-mouse{display:none}.hor-dica .so-toque{display:inline}}
.hor-revela.ja-viu .hor-dica{opacity:0}
.m-cases.anima .vit--hor:not(.on) .hor-dica{opacity:0}
.m-cases.anima .vit--hor.on .hor-revela:not(.ja-viu) .hor-dica{animation:hz-aparece .9s ease-out 2.6s backwards}   /* entra depois que o pôster abre */


/* ---------- RODAPÉ (aprovado em 14/10/2026) ----------
   Linha de contatos sobre um fio e o logo empilhado grande fechando a página. O logo se desenha pelo traço, letra por letra,
   e o ponto vermelho do "a" cai por último (o rodapé entra na lista de lugares onde o ponto pode ser vermelho, DNA 3.4). */
.rd{position:relative;background:var(--bq);padding:var(--e7) var(--margem) var(--e6);overflow:hidden}
.rd__info{display:flex;justify-content:space-between;align-items:center;gap:var(--e3) var(--e5);flex-wrap:wrap;border-top:1px solid var(--pq);padding-top:var(--e3);font-size:16px}
.rd__links{display:flex;gap:var(--e4);flex-wrap:wrap;list-style:none;margin:0;padding:0}
.rd a{color:var(--pq);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.rd a:hover{text-decoration:underline;text-underline-offset:4px}
.rd .ic{width:20px;height:20px}
.rd__topo .ic{transform:rotate(180deg)}
.rd__assina{color:var(--apoio);font-size:16px;white-space:nowrap}
/* o logo e a assinatura dividem a base: o © fica no canto direito, na linha de base do "nova" (pôster suíço: respiro com um peso pequeno no canto) */
.rd__base{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--e4);margin-top:var(--e7)}
.rd__logo{display:block;flex:0 1 auto;width:min(100%,calc(58svh * 1.387),980px);height:auto;overflow:visible}
.rd .tr{fill:none;stroke:#fff;stroke-width:46;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1}
.rd .tr.v{stroke-width:54}
.rd .tr.pico{stroke-width:66}
.rd.on .tr{transition:stroke-dashoffset .62s cubic-bezier(.45,.05,.3,1);stroke-dashoffset:0}
.rd .ponto{transform:translateY(-320px);opacity:0}
.rd.on .ponto{animation:rd-cai 1s var(--quica) both;animation-delay:var(--d)}
@keyframes rd-cai{0%{transform:translateY(-320px);opacity:0}25%{opacity:1}60%{transform:translateY(0)}78%{transform:translateY(-34px)}100%{transform:translateY(0);opacity:1}}
@media (max-width:760px){
 .rd{padding:var(--e6) var(--e2) var(--e5)}
 .rd__info{flex-direction:column;align-items:flex-start}
 .rd__links{flex-direction:column;gap:var(--e2)}
 .rd__base{flex-direction:column;align-items:flex-start;gap:var(--e3);margin-top:var(--e6)}
}
@media (prefers-reduced-motion:reduce){
 .rd .tr{stroke-dashoffset:0!important;transition:none!important}
 .rd .ponto{transform:none!important;opacity:1!important;animation:none!important}
}

/* ---------- área de toque (auditoria 14/10/2026) ----------
   Links pequenos ganham uma área invisível maior, de pelo menos 44 px de altura, sem mudar o desenho nem o espaçamento. */
.m-link,.rd a,.m-nav>a{position:relative}
.m-link::before,.rd a::before,.m-nav>a::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}

/* pular para o conteúdo: só aparece quando recebe o foco do teclado */
.m-pular{position:absolute;left:var(--e2);top:-100px;z-index:100;padding:12px 18px;border-radius:var(--raio-pilula);background:var(--pq);color:var(--bq);font:600 15px/1 var(--f-texto);text-decoration:none}
.m-pular:focus{top:var(--e2)}
#conteudo:focus{outline:none}

/* dicas em símbolo (14/10/2026, no lugar das frases "Passe o mouse na foto" e "Mexa o mouse"):
   Horácio: anel claro que pulsa sobre a parte de baixo do pôster, eco do círculo que revela a foto (vale para mouse e toque).
   Rastro do Sobre: ícone de mouse (Phosphor bold) balançando de leve, como quem mexe o mouse. */
.hor-dica--anel{left:50%;top:64%;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border-radius:50%;background:none;backdrop-filter:none;border:2px solid #F4F2ED;box-shadow:0 0 0 1px rgba(42,31,24,.25)}
.hor-dica--anel i{position:absolute;inset:-2px;border-radius:50%;border:2px solid #F4F2ED;animation:hd-pulso 2.2s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes hd-pulso{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.so-ra__dica--icone{line-height:0}
.so-ra__dica--icone svg{display:block;animation:sd-balanca 2.6s ease-in-out infinite}
@keyframes sd-balanca{0%,100%{transform:translateX(-7px) rotate(-6deg)}50%{transform:translateX(7px) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.hor-dica--anel i,.so-ra__dica--icone svg{animation:none}}

/* ---------- MENU DO CELULAR (14/10/2026) ---------- */
.m-nav__menu{display:none}
.m-nav__abre{display:block;padding:10px 18px;border:0;border-radius:var(--raio-pilula);background:none;font:600 15px/1 var(--f-texto);color:var(--pq);cursor:pointer}
@media (max-width:820px){
 .m-nav__menu{display:block}
 /* Menu + Fale comigo cabem numa linha só ao lado do logo */
 .m-nav{gap:var(--e2);padding-left:var(--e2);padding-right:var(--e2)}
 .m-nav ul{padding:4px;gap:2px}
 .m-nav li a,.m-nav__abre{padding:10px 14px;white-space:nowrap}
 /* o menu do topo acompanha a rolagem: some ao descer, volta ao subir */
 .m-nav{position:sticky;top:0;z-index:40;background:var(--bq);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
 .m-nav.solta{box-shadow:0 1px 0 var(--linha)}
 .m-nav.esconde{transform:translateY(-100%)}
}
.m-menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;padding:var(--e3) var(--e2) var(--e5);background:var(--bq);opacity:0;transition:opacity .22s ease}
.m-menu.on{opacity:1}
.m-menu[hidden]{display:none}   /* fechado não pode ficar por cima da página (o display:flex anulava o hidden) */
.m-menu__topo{display:flex;align-items:center;justify-content:space-between}
.m-menu__topo .logo{height:26px;width:auto}
.m-menu__fecha{width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--suave);cursor:pointer}
.m-menu>nav{margin:auto 0;padding:var(--e5) 0}
.m-menu__lista{list-style:none;margin:0;padding:0}
.m-menu__lista li{margin:0 0 var(--e2)}
.m-menu__lista li.d1{padding-left:.9em}
.m-menu__lista li.d2{padding-left:.35em}
.m-menu__lista a{font:700 clamp(44px,13vw,72px)/1 var(--f-titulo);letter-spacing:-.02em;color:var(--pq);text-decoration:none}
.m-menu__lista a:focus-visible{outline:2px solid var(--pq);outline-offset:4px}
.m-menu__wa{align-self:flex-start}
.m-menu-aberto,.m-menu-aberto body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.m-menu,.m-nav{transition:none}}


/* ENTRADA (16/10/2026): tela de abertura em preto queimado. As peças do logo caem e se encaixam, o ponto vermelho cai por último,
   e a tela sobe como cortina (a borda de baixo ganha uma barriga ao subir). A abertura do site fica pausada até a cortina subir.
   Só na primeira visita da sessão; ?entrada força, ?sementrada pula. Quem pede menos movimento não vê. Script: js/entrada.js */
html.entrada{overflow:hidden}
html.entrada:not(.entrada-no-ar) body::before{content:"";position:fixed;inset:0;z-index:9998;background:var(--pq)}
html.entrada .m-hero,html.entrada .m-hero *{animation-play-state:paused!important}
html.entrada-tocou .m-hero .m-ponto--quica{animation:none}   /* a entrada já teve a quicada do ponto: o do título chega parado, junto com a linha */
html.entrada:not(.entrada-ver) :is(.m-nav,main,footer){visibility:hidden}   /* o site por trás não pinta enquanto as peças caem (mais leve); volta a pintar na pausa do logo pronto */
.m-entrada{position:fixed;inset:0;z-index:9999;background:var(--pq);cursor:default;transition:transform .9s cubic-bezier(.35,0,.65,.6);will-change:transform}
.m-entrada::after{content:"";position:absolute;left:0;right:0;top:100%;height:12svh;background:var(--pq);border-radius:0 0 50% 50%/0 0 100% 100%}   /* a barriga da cortina: fica fora da tela até ela subir */
.m-entrada__mede{position:absolute;left:50%;top:50%;width:min(78vw,calc(62svh * 1.37),760px);transform:translate(-50%,-50%);visibility:hidden}
.m-entrada__mede svg{display:block;width:100%;height:auto}
.m-entrada__logo{position:absolute;inset:0;transition:transform .9s cubic-bezier(.35,0,.65,.6)}
.m-entrada__logo svg{position:absolute;overflow:visible;will-change:transform}   /* uma camada por peça: o movimento roda fora do script */
.m-entrada.sobe{transform:translateY(calc(-100% - 13svh))}   /* 18/10: barriga de 16 para 12svh, sai da tela mais cedo */
.m-entrada.sobe .m-entrada__logo{transform:translateY(-9svh)}