Quebra em papel rasgado

Uma dobra clara no meio de uma página escura, com as bordas de cima e de baixo arrancadas em vez de cortadas. O olho não lê "o fundo mudou de cor": lê "tem uma folha colada aqui". A diferença é toda da borda — dois filetes irregulares de no máximo 22px.

O problema é conhecido: .sec-paper entre duas .sec-dark produz duas linhas retas perfeitas atravessando a tela, e retas perfeitas entre tons opostos leem como slide, não como página. O rasgo transforma a exceção de tom em objeto. É a primeira peça da categoria efeitos, e a única da biblioteca que não tem conteúdo próprio: ela é só a borda de uma seção que já existe.

Quando usar

• Numa página escura que tem uma parada clara — o respiro previsto no contrato (§3, regra do tom vizinho). O rasgo justifica editorialmente essa quebra de tom.
• Quando o bloco claro é o mais lido da página: manifesto, lista de serviços, depoimento longo. Fundo claro carrega texto melhor, e a borda rasgada compra a licença de inverter.
• Em marca com pegada editorial, artesanal ou de arquivo. O rasgo é um gesto de papel, e ele fala.

Quando não usar

• Mais de duas vezes na mesma página. O polígono é fixo: a terceira aparição do rasgo idêntico denuncia que é CSS, e o efeito vira padrão de fundo.
• Quando a seção vizinha tem foto ou vídeo sangrando até a borda. O vão do rasgo é pintado com uma cor chapada; contra uma imagem, o recorte aparece como um filete de cor errada.
• Em seção que hospeda componente com elemento vazando da caixa — dropdown de conversao/select-custom, sombra que estoura, badge pendurado no canto. O clip-path corta descendente, sem aviso.
• Em página inteira clara. Sem contraste de tom entre a seção e o que está atrás, não há rasgo — há uma borda serrilhada sem motivo.
• Quando a marca é técnica, financeira dura ou institucional sóbria. Papel rasgado tem temperatura; nem toda marca quer.

Padrão editorial

O componente não tem slot de texto. O que ele pede é uma decisão sobre qual conteúdo merece a folha — e essa decisão é editorial:

Uma folha por página. Duas ainda passam se estiverem longe uma da outra e o conteúdo justificar as duas. Três é decoração.

Assets

Nenhum. Sem SVG, sem PNG, sem máscara em imagem — o rasgo é um clip-path de 58 vértices escrito no CSS. Isso não é economia de bytes, é a razão de o componente funcionar: nenhuma requisição a mais, nada para servir em 2x, e a borda acompanha qualquer largura de tela sem esticar pixel.

Como usar

<link rel="stylesheet" href="componentes/efeitos/quebra-papel-rasgado/estilo.css">

Sem script. Duas peças, nesta ordem:

<div class="torn-band">
  <section class="sec-paper sec-pad torn">
    <div class="wrap"><!-- conteúdo livre --></div>
  </section>
</div>

O .torn-band pinta a cor que aparece dentro do rasgo. O .torn recorta a seção. O markup.html traz as duas vizinhas escuras junto porque o efeito só existe na junção — mas elas são contexto, não fazem parte do que se copia.

Ganchos

Variações

Gotchas

• clip-path apaga, não desenha. O que aparece no lugar do pedaço arrancado é o que estiver pintado atrás da seção — nunca a seção vizinha, que está ao lado e não embaixo. Sem o .torn-band, quem aparece no vão é o fundo do body. Numa página de fundo claro o rasgo some sem erro nenhum no console.

• A cor do vão tem de bater com a vizinha, não com o tema. O padrão é --dark (#0a0a0a). Se as vizinhas forem .sec-deep (--dark-2), o vão sai num escuro diferente do que está ao lado — o contrato chama isso de "quase imperceptível", mas em faixa de 20px colada na vizinha, aparece. Ajuste --torn-behind.

• A mordida come o padding, não o conteúdo — enquanto houver .sec-pad. Com --sec-gap no piso (110px), 22px de rasgo deixam 88px de respiro. Numa seção sem .sec-pad, ou com padding curto, o rasgo entra no texto.

• Tudo que ultrapassa a caixa da seção é cortado. Descendente absoluto, dropdown aberto, tooltip, sombra larga, badge pendurado na borda: o recorte não pergunta. Uma seção rasgada não hospeda componente que estoura a própria caixa.

• A profundidade é px e o espaçamento é %, então a inclinação muda com a tela. Em 1240px cada dente tem 44px de base para 22px de altura e lê como papel; em 375px a base cai para 13px e a mesma altura vira serra. Daí --torn-depth cair para .72 abaixo de 900px e .5 abaixo de 560px. Não é enfeite de mobile — é o que mantém o efeito legível.

• O polígono é fixo de propósito. É tentador sortear os vértices por seção para "ficar mais natural". Não fica: folha de papel tem uma marca de rasgo só, e ruído diferente a cada dobra lê como bug de renderização. Se repetir tanto a ponto de incomodar, o problema é a quantidade de quebras, não o polígono.

• clip-path cria contexto de empilhamento. Nenhum z-index de dentro da seção escapa para fora dela — e mesmo que escapasse, o recorte já teria cortado.

• Não anime o clip-path. São 58 vértices interpolando por frame, e o resultado nem é bom: o rasgo "respirando" lê como glitch. Este componente é geometria parada; o movimento da seção continua sendo data-rv e .ttl, do core.

• É decoração pura. Não tem papel semântico, não anuncia nada e não precisa de aria. Por isso o invólucro é <div> e não <section>: uma segunda <section> em volta criaria um landmark falso para leitor de tela, e o componente passaria a atrapalhar exatamente quem não vê o rasgo.

• Na versão confirmada do projeto de origem, o efeito está desligado. Ver o histórico abaixo — é o gotcha que decide o status.

Histórico

O desligamento não tem motivo registrado. Varrido o github-repo/ inteiro, não há comentário no CSS, nota em markdown nem mensagem de commit explicando a troca por clip-path:none — o site entrou no repositório já com a regra inerte (commit 409fc48, "Site Liberta Wealth"). O registro do projeto (projetos/liberta-wealth.md) documenta o fato, não a razão.

Sem motivo registrado, não invente um. Duas hipóteses plausíveis, e nenhuma delas verificada: ou o rasgo foi julgado artesanal demais para uma marca de consultoria patrimonial, ou a mordida de 22px em largura de desktop leu como serra e ninguém voltou para calibrar. A segunda tem remédio nesta versão (--torn-depth); a primeira é decisão de marca e nenhum CSS resolve.

O que mudou na normalização:

Status externo: o polígono existe e funciona, mas nunca rodou em produção. A única versão confirmada do site de origem o traz desligado, e a versão em que ele está ativo (site/) não tem publicação confirmada. Foi normalizado ao contrato e verificado no preview em 1200px, 700px e 420px — nas duas bordas, nas duas variações de borda única e com os três knobs — mas não tem quilometragem: espere calibrar --torn-depth no primeiro uso real. Rodando num site, vira estavel e esta tabela ganha a linha do projeto.