/* ==========================================================================
   DONA ALMA · O JEITO DA CASA — design system v1.0 (2026-09-29)
   --------------------------------------------------------------------------
   Este arquivo É o sistema: tokens, materiais, componentes e movimento.
   A página ds-dona-alma.html só documenta. Para usar numa peça nova:
     <link rel="stylesheet" href="assets/css/dona-alma.css">
     <script src="assets/js/dona-alma.js" defer></script>
   Regras da casa: zero valor solto (tudo sai de um token), tomate uma vez
   por tela, acento da Spot montado com os glifos dela, movimento sempre com pausa possível.
   Fora dos tokens ficam só: ângulos de geometria (45°, 90°, 180°, 360°),
   os quadros internos de cada keyframe, as quebras de @media e o 1px
   do padrão de acessibilidade (texto só para leitor de tela).
   ========================================================================== */

/* 1. FONTES ---------------------------------------------------------------
   Spot e Sink: licença comercial do Felipe (não versionar; conferir licença
   web antes de publicar). Fraunces e Host Grotesk: SIL OFL.
   Fraunces entra no lugar da Funnel Display (2026-09-29, a pedido do Felipe:
   "um toque de nostalgia"): eixo SOFT fixo em 100, a versão macia inspirada
   em Cooper, Windsor e Souvenir; peso 300–900 e tamanho óptico variáveis.
   Subconjunto latino em WOFF2, font-display: swap, fallback com métrica
   ajustada para o texto não pular quando a fonte chega (CLS zero). */
@font-face { font-family: "Spot"; src: url("../fonts/spot-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spot Outline"; src: url("../fonts/spot-outline.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sink"; src: url("../fonts/sink.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-suave.woff2") format("woff2-variations"), url("../fonts/fraunces-suave.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-suave-italico.woff2") format("woff2-variations"), url("../fonts/fraunces-suave-italico.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/host-grotesk-300i.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/host-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/host-grotesk-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/host-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/host-grotesk-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/host-grotesk-600i.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/host-grotesk-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Fallbacks medidos com fontTools contra as fontes do sistema (2026-09-29) */
@font-face { font-family: "Host Grotesk Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 107.6%; ascent-override: 94.3%; descent-override: 29.3%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia"); size-adjust: 94.3%; ascent-override: 103.7%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "Spot Fallback"; src: local("Impact"), local("Haettenschweiler"), local("Arial Narrow Bold"); size-adjust: 101.3%; ascent-override: 94.7%; descent-override: 25.7%; line-gap-override: 0%; }
@font-face { font-family: "Sink Fallback"; src: local("Impact"), local("Arial Narrow Bold"); size-adjust: 93.5%; ascent-override: 80.2%; descent-override: 21.4%; line-gap-override: 0%; }

/* As duas vozes das redes. Desde 2026-10-20 (Felipe): Shantell Sans 700 é a voz de canto (o
   aparte à caneta, antes Caveat) e Press Start 2P é a voz da tela (o computador da vó, antes
   Pixelify Sans). SIL OFL, subconjunto latino.
   O size-adjust deixa as duas no tamanho das antigas: o meio-termo (média geométrica) entre
   igualar a largura e igualar a altura do x. Sem ele, a Press Start 2P sairia quase o dobro
   da Pixelify e a Shantell, 50% mais larga que a Caveat. Quem monta no Photoshop com o TTF:
   a Press Start a 61% e a Shantell a 67% do corpo que a peça antiga usava. */
@font-face { font-family: "Shantell Sans"; src: url("../fonts/shantell-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; size-adjust: 67%; }
@font-face { font-family: "Press Start 2P"; src: url("../fonts/press-start-2p.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; size-adjust: 61%; }
@font-face { font-family: "Shantell Fallback"; src: local("Comic Sans MS Bold"), local("ComicSansMS-Bold"), local("Chalkboard SE Bold"); size-adjust: 72.3%; ascent-override: 94.5%; descent-override: 29.6%; line-gap-override: 0%; }
@font-face { font-family: "Press Start Fallback"; src: local("Courier New"), local("CourierNewPSMT"); size-adjust: 101.7%; ascent-override: 60%; descent-override: 0%; line-gap-override: 0%; }

/* 2. TOKENS ---------------------------------------------------------------- */
:root {
  /* 2.1 Cor — a paleta do Reels do nome novo (direção visual de 2026-09-28) */
  --lilas: #BCA8E6;      /* cor da marca: domina */
  --papel: #EDE6DA;      /* fundo base */
  --tinta: #2A211C;      /* cacau: texto, traço, logotipo */
  --tomate: #EE5A36;     /* o único tempero: carimbo, caneta, estrela */
  --menta: #A9DFC6;      /* apoio (herança Alma Nove) */
  --rosa: #F4B9C6;       /* apoio (rosa-bochecha) */
  --manteiga: #F5D98F;   /* apoio: etiquetas, manchetes */
  --kraft: #C8A478;      /* textura: faixas de papel pardo */
  --branco: #FAF6EF;     /* borda de adesivo, tiras de legenda */
  --ameixa: #764293;     /* o cabelo da mascote */
  --bochecha: #F0C4DE;   /* a bochecha da mascote */
  --crepe: #E9E0CD;      /* fita crepe */
  --preto-puro: #000;    /* só para máscara e para o truque da retícula */
  --branco-puro: #fff;   /* idem */

  /* canais para transparência: rgb(var(--x-rgb) / .5) */
  --lilas-rgb: 188 168 230;
  --papel-rgb: 237 230 218;
  --tinta-rgb: 42 33 28;
  --tomate-rgb: 238 90 54;
  --menta-rgb: 169 223 198;
  --rosa-rgb: 244 185 198;
  --manteiga-rgb: 245 217 143;
  --kraft-rgb: 200 164 120;
  --branco-rgb: 250 246 239;
  --ameixa-rgb: 118 66 147;
  --crepe-rgb: 233 224 205;
  --preto-rgb: 0 0 0;

  /* passos: -2 = passar o mouse, -3 = apertado */
  --lilas-2: #AA90DF;  --lilas-3: #9778D8;
  --menta-2: #93D7B7;  --menta-3: #7CCEA8;
  --rosa-2: #F09FB0;   --rosa-3: #EC849B;
  --manteiga-2: #F2CF73; --manteiga-3: #F0C657;
  --kraft-2: #BF9562;  --kraft-3: #B6874D;
  --papel-2: #E3D8C5;  --papel-3: #D9CAB1;
  --branco-2: #F3E9D8; --branco-3: #EBDCC0;
  --tinta-sup: #3C2F28; --tinta-sup-2: #4F3E34;

  /* texto seguro (contraste medido, WCAG 2.2) */
  --tinta-2: #4A3C35;        /* 8,5:1 no papel · 5,0:1 no lilás · 4,5:1 no kraft */
  --tinta-3: #665750;        /* 5,6:1 no papel · só em papel, branco, menta e manteiga */
  --tomate-tinta: #BF3210;   /* 4,6:1 no papel · erro e destaque em texto */
  --menta-tinta: #266749;    /* 5,4:1 no papel · sucesso */
  --rosa-tinta: #A31A38;     /* 6,1:1 no papel */
  --lilas-tinta: #502C9B;    /* 7,8:1 no papel · 4,5:1 no próprio lilás · informação */
  --manteiga-tinta: #795B0B; /* 5,1:1 no papel · aviso */
  --noite-texto: #EDE6DA;    /* 12,7:1 na tinta */
  --noite-texto-2: #CBBFB1;  /* 8,7:1 na tinta */
  --noite-texto-3: #B8AA9B;  /* 7,0:1 na tinta */

  /* transparências da tinta (sombra, linha, véu) */
  --tinta-a04: rgb(var(--tinta-rgb) / .04);
  --tinta-a08: rgb(var(--tinta-rgb) / .08);
  --tinta-a12: rgb(var(--tinta-rgb) / .12);
  --tinta-a16: rgb(var(--tinta-rgb) / .16);
  --tinta-a24: rgb(var(--tinta-rgb) / .24);
  --tinta-a40: rgb(var(--tinta-rgb) / .40);
  --tinta-a64: rgb(var(--tinta-rgb) / .64);
  --tinta-a80: rgb(var(--tinta-rgb) / .80);
  --papel-a12: rgb(var(--papel-rgb) / .12);
  --papel-a18: rgb(var(--papel-rgb) / .18);
  --papel-a32: rgb(var(--papel-rgb) / .32);
  --branco-a50: rgb(var(--branco-rgb) / .50);
  --branco-a80: rgb(var(--branco-rgb) / .80);
  --tomate-a18: rgb(var(--tomate-rgb) / .18); /* véu fora da área segura */
  --preto-a18: rgb(var(--preto-rgb) / .18);   /* linha de tela antiga */
  --preto-a55: rgb(var(--preto-rgb) / .55);   /* vinheta de tela antiga */

  /* papéis semânticos */
  --cor-marca: var(--lilas);
  --cor-acento: var(--tomate);
  --cor-sucesso: var(--menta);     --cor-sucesso-tinta: var(--menta-tinta);
  --cor-aviso: var(--manteiga);    --cor-aviso-tinta: var(--manteiga-tinta);
  --cor-erro: var(--rosa);         --cor-erro-tinta: var(--tomate-tinta);
  --cor-info: var(--lilas);        --cor-info-tinta: var(--lilas-tinta);

  /* o 3A3R: uma cor por etapa (a ampulheta estreita até a mesa e abre de novo) */
  --etapa-assimilacao: var(--lilas);     /* o bairro fica sabendo */
  --etapa-aquisicao: var(--rosa);        /* bate na porta */
  --etapa-ativacao: var(--manteiga);     /* senta à mesa: onde a venda acontece */
  --etapa-retencao: var(--menta);        /* volta no domingo */
  --etapa-receita: var(--kraft);         /* leva marmita pra casa */
  --etapa-recomendacao: var(--ameixa);   /* traz a parentada (o cabelo da vó) */
  --etapa-recomendacao-texto: var(--papel); /* papel sobre ameixa: 5,7:1 */

  /* degradês permitidos (luz, nunca enfeite; tomate e tinta nunca entram) */
  --luz-janela: radial-gradient(58% 52% at 50% 42%, rgb(var(--branco-rgb) / .55), transparent 72%);
  --luz-rosa: radial-gradient(closest-side, rgb(var(--rosa-rgb) / .78), rgb(var(--rosa-rgb) / 0));
  --luz-menta: radial-gradient(closest-side, rgb(var(--menta-rgb) / .72), rgb(var(--menta-rgb) / 0));
  --luz-manteiga: radial-gradient(closest-side, rgb(var(--manteiga-rgb) / .7), rgb(var(--manteiga-rgb) / 0));
  --luz-lilas: radial-gradient(closest-side, rgb(var(--lilas-rgb) / .8), rgb(var(--lilas-rgb) / 0));
  --aquarela:
    radial-gradient(38% 46% at 18% 28%, rgb(var(--rosa-rgb) / .62), transparent 72%),
    radial-gradient(42% 52% at 82% 70%, rgb(var(--menta-rgb) / .58), transparent 72%),
    radial-gradient(30% 38% at 62% 18%, rgb(var(--manteiga-rgb) / .55), transparent 72%);

  /* 2.2 Letra — famílias */
  --letra-manchete: "Spot", "Spot Fallback", Impact, "Arial Narrow", sans-serif;
  --letra-manchete-contorno: "Spot Outline", "Spot", "Spot Fallback", Impact, sans-serif;
  --letra-etiqueta: "Sink", "Sink Fallback", Impact, "Arial Narrow", sans-serif;
  --letra-numero: var(--letra-etiqueta);  /* números de destaque: a Sink fica melhor que todas (pedido do Felipe) */
  --caixa-etiqueta: uppercase;          /* a Sink vai sempre em caixa alta */
  --letra-titulo: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --letra-texto: "Host Grotesk", "Host Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --letra-codigo: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* só em bloco de código */
  --letra-mao: "Shantell Sans", "Shantell Fallback", "Comic Sans MS", cursive;          /* voz de canto: o aparte à caneta */
  --letra-tela: "Press Start 2P", "Press Start Fallback", "Courier New", monospace;      /* voz da tela: o computador da vó, a frase do mercado */

  /* tamanhos (rem = 16px; clamp = escala fluida de 375 a 1440) */
  --fs-manchete: clamp(3.5rem, 1.9rem + 7.4vw, 10rem);
  --fs-manchete-m: clamp(2.5rem, 1.5rem + 4.6vw, 6rem);
  --fs-manchete-p: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  --fs-h1: clamp(2.75rem, 1.7rem + 4.2vw, 5.25rem);
  --fs-h2: clamp(2.125rem, 1.45rem + 2.8vw, 3.75rem);
  --fs-h3: clamp(1.625rem, 1.3rem + 1.3vw, 2.375rem);
  --fs-h4: clamp(1.3125rem, 1.15rem + .65vw, 1.75rem);
  --fs-h5: 1.1875rem;
  --fs-h6: 1.0625rem;
  --fs-texto-g: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  --fs-texto: 1.0625rem;
  --fs-texto-p: .9375rem;
  --fs-rotulo: .875rem;
  --fs-legenda: .8125rem;
  --fs-ajuda: .8125rem;
  --fs-mini: .75rem;
  --fs-etiqueta: 1.125rem;
  --fs-numero: clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem);
  --fs-codigo: .8125rem;
  /* tamanhos de cartaz (só em peças grandes da página) */
  --fs-gigante: clamp(12rem, 36vw, 40rem);          /* a palavra de fundo do hero */
  --fs-titulo-g: clamp(5rem, 3rem + 7vw, 11rem);     /* título em cartaz (3A3R) */
  --fs-etapa: clamp(4rem, 3rem + 4vw, 7.5rem);       /* número da ficha de etapa */
  --fs-citacao-g: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  --fs-destaque: clamp(1.0625rem, .9rem + .7vw, 1.5rem);
  --fs-carimbo: clamp(1rem, .7rem + .9vw, 1.6rem);

  --peso-leve: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;
  --peso-pesado: 800;
  --peso-h1: 800;   /* Fraunces é variável: pesos intermediários são de verdade */
  --peso-h2: 760;
  --peso-h3: 650;
  --peso-h4: 600;

  --lh-manchete: .88;
  --lh-manchete-acento: 1.14;  /* manchete com acento montado: o acento precisa de ar entre as linhas */
  --lh-titulo: 1.02;
  --lh-titulo-2: 1.12;
  --lh-ui: 1.3;
  --lh-legenda: 1.45;
  --lh-texto: 1.6;
  --lh-codigo: 1.6;

  --ls-apertado: -.03em;
  --ls-justo: -.02em;
  --ls-leve: -.01em;
  --ls-sutil: -.005em;
  --ls-zero: 0em;
  --ls-etiqueta: .01em;
  --ls-aberto: .04em;

  --medida: 66ch;
  --medida-curta: 44ch;

  /* 2.3 Espaço (base 4) */
  --e-0: 2px;
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;
  --e-10: 128px;
  --e-11: 192px;
  --calha: clamp(var(--e-4), 4vw, var(--e-7));
  --secao-y: clamp(var(--e-9), 9vw, var(--e-11));
  --largura: 1320px;
  --largura-texto: 760px;
  --alvo: 44px;          /* alvo de toque mínimo */
  --alvo-g: 56px;
  --logo-p: 96px;          /* logotipo no cabeçalho: do celular ao computador */
  --logo-m: 122px;
  --medida-campo: 34rem;   /* largura máxima de um campo de formulário */
  --largura-janela: 560px; /* janela (diálogo) */
  --altura-janela: 720px;
  --largura-gaveta: 640px;
  --largura-recado: 440px;
  --coluna-p: 220px;        /* menor coluna de uma grade automática */
  --coluna: 260px;
  --coluna-g: 300px;
  --largura-celular: 360px; /* uma tela de celular em demonstração */

  /* 2.4 Forma */
  --raio-papel: 2px;     /* folhas, fichas, impressos */
  --raio-etiqueta: 6px;  /* botões, campos, etiquetas */
  --raio-janela: 12px;   /* janelas de sistema e gavetas */
  --raio-adesivo: 999px; /* adesivos, selos, pílulas */
  --traco-fino: 1px;
  --traco: 1.5px;
  --traco-forte: 2px;
  --traco-caneta: 3.5px;
  --ponta: 14px;         /* largura da ponta rasgada de uma tira */

  /* 2.5 Sombra: sempre da tinta, nunca cinza genérico */
  --sombra-colada: 0 1px 0 var(--tinta-a08), 0 2px 4px -1px var(--tinta-a12);
  --sombra-solta: 0 16px 30px -14px var(--tinta-a40), 0 4px 10px -4px var(--tinta-a16);
  --sombra-janela: 0 30px 70px -24px rgb(var(--tinta-rgb) / .55), 0 8px 18px -8px var(--tinta-a24);
  --desloca-duro: 3px;
  --desloca-duro-alto: 5px;
  --desloca-duro-baixo: 1px;
  --sombra-dura: var(--desloca-duro) var(--desloca-duro) 0 var(--linha-forte-cor, var(--tinta));
  --sombra-dura-alta: var(--desloca-duro-alto) var(--desloca-duro-alto) 0 var(--linha-forte-cor, var(--tinta));
  --sombra-dura-baixa: var(--desloca-duro-baixo) var(--desloca-duro-baixo) 0 var(--linha-forte-cor, var(--tinta));
  --sombra-tira-x: 2px;
  --sombra-tira-y: 3px;

  /* 2.6 Giro (a colagem nunca é reta) */
  --giro-0: .4deg;
  --giro-1: .9deg;
  --giro-2: 1.8deg;
  --giro-3: 3deg;
  --giro-4: 5deg;
  --giro-5: 8deg;

  /* 2.7 Movimento */
  --t-instante: 90ms;
  --t-rapido: 150ms;
  --t-base: 240ms;
  --t-colar: 520ms;          /* 6 quadros a 12 fps */
  --t-colar-lento: 2080ms;   /* o mesmo gesto em câmera lenta (x4), para estudar os quadros */
  --t-carimbo: 340ms;
  --t-folha: 760ms;
  --t-lento: 1200ms;
  --t-escrever: 900ms;
  --t-respiro: 250ms;        /* 2 quadros a 8 fps */
  --t-luz: 7s;               /* dl-breathe */
  --t-grao: 900ms;           /* dl-grain */
  --t-letreiro: 38s;
  --atraso-passo: 70ms;      /* cascata entre peças */
  --ease-papel: cubic-bezier(.22, .8, .2, 1);
  --ease-mola: cubic-bezier(.34, 1.56, .64, 1);
  --ease-saida: cubic-bezier(.16, 1, .3, 1);      /* Overprint e Tide */
  --ease-cortina: cubic-bezier(.86, 0, .07, 1);   /* 412.digital */
  --ease-ficha: cubic-bezier(.5, 0, .25, 1);      /* Patch */
  --t-pulso: 1.6s;           /* anel de quem está ativo, brilho do esqueleto, areia da ampulheta */
  --t-carregando: 1.1s;      /* Overprint: barras de carregando */
  --atraso-carregando: 120ms;
  --t-sinal: 6s;             /* Tide: o sinal que corre no pipeline */
  --t-cursor: 900ms;         /* cursor piscando */
  --t-luz-anda: 22s;         /* manchas de luz do hero */
  --t-boia: 2.4s;            /* designer-landing: a seta que boia */
  --t-palavra: 700ms;        /* Patch: palavra que vira de pé */
  --atraso-palavra: 100ms;
  --ease-palavra: cubic-bezier(0, 0, 0, 1);
  --atraso-traco: 180ms;     /* caneta: um traço depois do outro */
  --atraso-fino: 120ms;
  --atraso-letra: 110ms;     /* letras recortadas */
  --t-giro-lento: 40s;       /* a estrela que gira */
  --pulso-raio: 14px;
  --luz-desfoque: 40px;
  --colar-altura: -18px;     /* de onde a peça cai quando cola */
  --colar-torcao: -7deg;     /* quanto ela chega torta */
  --respiro-x: 1.5px;
  --respiro-giro: .4deg;
  --perspectiva: 1200px;     /* profundidade de peças que viram (cartão, ficha) */

  /* 2.8 Camadas */
  --z-fundo: -1;
  --z-base: 1;
  --z-colagem: 2;
  --z-alto: 10;
  --z-cabecalho: 50;
  --z-gaveta: 80;
  --z-grao: 90;
  --z-modal: 100;
  --z-recado: 120;

  /* 2.9 Materiais (máscaras e texturas geradas com semente fixa) */
  --mascara-ponta-esq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M14 0 L5.9 0 L8.1 9.6 L1.7 20 L6 30.6 L4.8 35.4 L0.7 43.2 L7.9 49.2 L1.9 54.3 L1.5 59.2 L3 64.7 L3.5 74.8 L6.2 82.5 L6.3 93.1 L3.6 100 L14 100 Z'/%3E%3C/svg%3E");
  --mascara-ponta-dir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L9.3 0 L12.5 5 L11.9 15.3 L12.2 23.6 L9.3 32.5 L12.5 37.6 L8.4 48.1 L13.1 54.8 L7.4 63.5 L10.6 68.1 L6.8 74.1 L12.9 84.3 L12.3 91.7 L11.7 100 L0 100 Z'/%3E%3C/svg%3E");
  --mascara-ponta-esq-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M14 0 L3.3 0 L7.4 8.8 L2.5 14.4 L2.4 23.5 L3.6 29 L0.8 38.9 L7.6 43.9 L7.3 53.6 L7.1 64.2 L4.9 74.2 L4.5 82.1 L2.5 89.1 L8.4 98.7 L6.7 100 L14 100 Z'/%3E%3C/svg%3E");
  --mascara-ponta-dir-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L8.8 0 L10.5 10.7 L13.9 19.7 L7.3 26.3 L10.3 33.9 L9.7 44.5 L6.8 48.9 L7.6 54 L11 64.6 L8 74.8 L5.9 79.4 L11.5 90.4 L6.1 100 L0 100 Z'/%3E%3C/svg%3E");
  --mascara-impresso-retrato: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'%3E%3Cpath d='M7 6.3 L14 7.7 L18.2 6.2 L24.1 6.8 L28.3 10.6 L31.5 8 L35.1 10.2 L38.8 9.6 L46.5 7.8 L51.2 7.4 L54.4 8.4 L61.3 5.4 L68.7 6.9 L74.6 6.7 L80 7.2 L87.6 7.7 L92.5 6.4 L100.4 4.2 L107 5.3 L113.8 5.2 L119.5 6.3 L123.4 5.1 L128.1 5.9 L131.6 4 L138.5 5.4 L144.9 7.8 L149.9 8.7 L155.9 8.9 L160.8 7 L164.6 6.6 L171.5 8.2 L174.7 7.3 L179.8 9.9 L183.5 6.6 L186.8 6.4 L194.4 7.3 L201.8 6.9 L206.7 8.5 L214.2 7.9 L220.1 7 L225.1 7 L229.4 7.7 L237.2 7.6 L243.9 8.3 L247.6 6.4 L253.8 4 L257.5 6 L262.9 4.7 L266.9 5.2 L272.6 4.1 L280 7.1 L283 2.6 L287.2 8.1 L293.9 5.7 L300.5 8.3 L307.6 6.3 L313.3 4.5 L317.9 5.9 L324 6.8 L330.1 5.5 L333.4 6.9 L340.8 7.5 L347.8 9.4 L355.6 9 L360.9 8.5 L364.3 6.8 L367.5 7.6 L372.5 8 L377.5 7.3 L385.1 5.2 L391.6 8.7 L393 6.3 L394.3 7 L394 11.3 L391.4 14.9 L393.7 22.3 L392.5 27.9 L392 32.3 L393.2 36.9 L392 42 L392.3 49.3 L395.1 55 L392.4 62.8 L393.5 68.2 L391.2 73.7 L393.4 80.7 L390.1 86.5 L389.9 90.4 L392.8 95.9 L392.9 102.1 L392.2 109.4 L391.6 113.3 L392.2 121.1 L391.3 127.4 L391.4 133.7 L390.8 140.4 L393.6 144.6 L391.6 150.2 L392.3 157.7 L393 163.6 L390.6 171.2 L394.8 176.6 L393 180.4 L391.5 185.8 L393.4 189.7 L392.8 194.9 L394 199.6 L394.6 205.2 L395.5 213 L395.4 218 L397.9 225.1 L392.5 230.7 L393.2 236 L392.4 241.4 L392.1 244.7 L393.9 251.5 L392.4 255.7 L392.6 261.5 L393.4 268.2 L394.7 275.6 L394.2 280.2 L389.1 287.3 L390.6 290.7 L391 297 L391.3 302.1 L393 305.4 L390.7 312.2 L392.7 317.2 L391.3 322.2 L391.1 329.7 L392.8 337.5 L392.9 341.4 L390 348.5 L391.2 352.5 L393.6 359 L392.9 362.5 L394.9 370.4 L392.8 377.6 L393.1 382.5 L392.1 387.9 L394.7 393.3 L392.9 401 L394.4 404.4 L392.7 410.9 L392.3 414.8 L394.7 422.3 L393.4 427.8 L396.1 431.9 L395.1 438.9 L394.6 444.2 L393.7 449.7 L393.6 453.9 L392.9 457.7 L394.8 463.9 L393.4 469.5 L392.4 477.1 L394.1 480.3 L394.9 484.4 L394.7 488.4 L393.9 493 L394.3 493 L393 491.9 L387.2 493.5 L380.2 490.9 L375.4 493.1 L368.9 492.4 L364 492.2 L356.8 491.3 L351.4 494.2 L347.3 495.5 L341.4 494.7 L338.4 493.9 L330.4 495.3 L323.4 497.2 L317.7 494.1 L312.8 493 L306.6 494.5 L300.4 492.4 L296.7 494.7 L291.1 492 L287.1 491.8 L281.2 492 L277.5 494.9 L271.8 493.6 L268.4 495.4 L261.7 494.1 L253.7 494.8 L248 491.8 L241.8 492.8 L235.7 490.2 L228.8 493.1 L223.8 492.8 L218.1 492.4 L214.1 494.5 L206.7 491.5 L203.6 492.6 L197.6 492.5 L193.5 492.4 L185.7 491.7 L181.5 491.8 L178.3 493.7 L173.9 491.4 L169.2 488.8 L162.8 490.5 L156.6 491 L152.9 492.9 L147.4 492.6 L141.9 491.1 L138.8 494.6 L131.6 492.8 L125.9 493.1 L122.6 495.6 L115.7 492.2 L111.7 493.5 L104 494.3 L98.8 492.3 L91.1 492 L83.3 492.4 L78.4 492.3 L72.3 493 L64.6 492.5 L58.6 494.1 L54.9 492.7 L50.2 492.7 L43.8 492.9 L39.8 490 L33.1 492.3 L29.7 491.5 L24.7 491.6 L21.7 493.7 L14.6 491.1 L7 491.9 L6 493 L6.9 492.6 L7.1 485.8 L11.1 479.8 L7.8 471.9 L6.4 468.9 L4.5 460.9 L7.5 454.9 L6.8 447.2 L6.3 439.7 L7.5 436.4 L7.4 432.5 L6.9 427.2 L7.2 419.4 L5.3 412.3 L5.3 409.1 L6.8 402.1 L9.8 397.5 L7.7 393.6 L7.3 386.4 L5.8 382.5 L6.6 378.5 L5.2 373.8 L8.9 369.7 L7.7 364.1 L8.3 356.7 L7.7 349.3 L8 346.3 L6.5 338.5 L7.2 331.2 L5.2 327.3 L6.9 321.9 L5.4 318.2 L6.5 313.7 L6.9 307.5 L8.6 301 L8.1 293.8 L7 286.9 L5.4 279.9 L4.7 273.8 L5.1 265.9 L4.3 257.9 L5.4 251.4 L6.2 245.2 L5.9 241.5 L6.6 234 L7.3 226.7 L9.3 218.9 L7.2 215.9 L7.1 211.8 L11.8 206.6 L9.8 199.2 L5.6 192 L6.2 184.5 L7.8 179.6 L9.8 175.9 L6.7 172.6 L6.7 166.3 L8 162.5 L5.7 155.6 L7.2 148 L6.4 141.1 L5.7 138 L5.1 130.4 L5.7 127.3 L4.4 120.3 L4.6 116.8 L6.4 113.4 L5.6 109.3 L4.8 105.8 L1.9 101.7 L6.3 96.4 L5.9 89.9 L8.7 86.1 L9.3 78.6 L7.1 71.1 L8.7 65.9 L7.3 59.7 L5.8 56 L7.5 50.8 L6.3 45.4 L7.7 37.4 L8.1 30.6 L8.1 26.7 L6.6 22 L6.5 15.4 L8.1 11.3 L6 7 Z'/%3E%3C/svg%3E");
  --mascara-impresso-paisagem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cpath d='M7 6.2 L14.5 4.6 L20.6 6 L26.3 6.2 L32.4 5.9 L37.9 5 L44.6 6.1 L52.2 6 L55.8 4.1 L60.3 4.5 L67 4.4 L71.2 8.2 L76.2 7.2 L81 7.5 L88.2 7.9 L93.3 7.4 L99.7 7.5 L106.6 7.9 L113.9 9.8 L120.8 5.9 L123.9 7.5 L128.5 9 L132.3 7.9 L135.5 6.7 L142.1 8.5 L147.7 7.9 L155.5 10.8 L163.2 6.6 L170.8 6.4 L178.4 5.4 L183.1 6.3 L187.8 7.2 L195.1 5.3 L198.6 6.3 L204.4 6.1 L212.2 5.3 L219 6.4 L225.4 3.8 L230.5 6.7 L234.2 0.2 L238.3 3.9 L245.3 6.6 L253.2 7.3 L256.3 4.9 L262.4 6.3 L267 6.4 L272.3 2.2 L276.6 5.5 L280.2 6.4 L284.9 5.2 L289.6 5.8 L294.1 10.7 L299.9 8.6 L306.8 7 L309.9 6.6 L313.8 9.9 L318 8.2 L324.4 7.3 L332 8.6 L339.2 7.6 L346.6 8.5 L353.1 6.6 L357.7 7.4 L364.2 7.5 L370.4 9.8 L375.6 7.4 L379.1 6.9 L386.7 8.5 L390.9 7.9 L395.9 5.1 L401.4 7 L404.9 6 L407.9 4.3 L413.1 4.8 L417 7.7 L423 7.9 L428.1 4.9 L433.5 11.9 L440.5 5.3 L447.6 5 L455 7 L458.6 3.8 L464.3 4.8 L470.6 6.4 L475.2 7 L479.7 5.6 L487.2 5.9 L490.5 7.4 L493 6.2 L495.1 7 L493.4 10.1 L494.9 14.5 L495.5 17.9 L495.5 23.3 L493 30.6 L493 35.2 L492.9 39.2 L490.3 46 L490.4 52.1 L492.3 59 L492.1 65.2 L492.1 70.8 L493.1 74.1 L491.4 78.4 L492.6 83.7 L491.4 89.6 L492.5 96.4 L491.2 100.1 L491 104.7 L492.9 110.2 L494.7 115.2 L493.4 119.3 L493.1 127.2 L493 131.3 L493.2 135.9 L492.2 140.9 L492.3 147.4 L492.1 150.6 L494.9 156.7 L492.8 160.5 L492.2 163.8 L493.9 171.6 L494.8 179.3 L492.3 187 L493.8 190.2 L495.1 195.7 L495.2 199.2 L491.5 206.2 L493 210.3 L493.2 215.6 L491.6 218.7 L494 225.1 L491.7 232.8 L491.5 240 L491.3 243.2 L490.3 249.5 L489.8 255.1 L493.1 258.3 L491.5 264.6 L497.4 270 L493.4 273.1 L492.2 280.2 L494.1 285.7 L494.4 290.5 L493.4 296.6 L493.8 304.6 L492.5 308.4 L492.2 314.4 L493.6 318.6 L492.8 325.6 L492.9 328.7 L494.6 333.4 L493 338.9 L489.9 342.9 L492.9 346.5 L491.9 350.1 L494.1 354.4 L494.1 358.7 L492.3 363.9 L493.9 369.7 L493.8 373.2 L492.9 378.3 L492 383.8 L492.8 389 L495.1 393 L493 388.8 L490.9 391.6 L484.6 391.6 L477.7 394.2 L474.2 392.8 L469.3 391.8 L464.5 392.4 L461.2 393.9 L455.8 392.9 L452 395.9 L447 393.4 L441.3 393.4 L433.7 394 L428.6 395.2 L425 395.2 L417.1 393.8 L410.2 393.1 L404.9 392.6 L400.4 392.7 L394 393.2 L387.3 390.8 L379.4 392.8 L374.7 395.8 L371.2 391.2 L363.8 390.5 L360.5 392.7 L352.8 392 L349.7 389.7 L343.2 391.4 L336.7 394 L333 392.1 L325.4 390.4 L321.5 393.2 L316.7 394.1 L309 391.2 L301.4 392.3 L296.4 394.8 L290.2 394.6 L286.4 393.8 L279 394.6 L271.9 395 L268.1 393.1 L261.7 391.5 L255.4 392.8 L250.5 391.9 L244.5 392 L237.1 393.5 L230 391.5 L222.1 393.2 L215 391.1 L209.5 392.3 L201.7 392.3 L197.8 390.5 L192 390.1 L188.2 390.3 L184.1 391.1 L179.8 391.5 L176.3 392.2 L169.2 393.7 L164.2 391.2 L159.8 395.9 L155.1 396.3 L150.1 392.9 L146.5 389.2 L142.4 395 L138.4 395.3 L132.2 393.5 L125.7 394.8 L118.3 393 L111.3 394.7 L103.9 395.7 L97.2 394.5 L91 393.3 L85.2 388.1 L81.7 393.3 L77.3 392.9 L71.9 390.9 L66.2 390.3 L60 391.8 L56.1 392.3 L52.3 392.7 L44.7 392 L38.7 391.2 L32.8 392.9 L28.2 391.7 L23.3 391 L19.6 393.7 L15.7 391.8 L12.3 397.3 L7 388.8 L9.4 393 L7.5 390.7 L8.7 384.4 L9 378.5 L8.6 371.5 L7.9 366 L5.7 361.1 L8 358 L8.2 354.3 L6.1 347.2 L8.2 342.5 L5.7 335.5 L7.3 327.6 L6.7 321.2 L7.8 317.3 L5.4 312.3 L6.8 304.6 L5.9 298.8 L3.8 292.5 L7 286.8 L4.3 282.5 L4.3 277.4 L5.9 271.4 L7.6 265.4 L8.4 260.6 L5.8 254.5 L8.7 247.5 L5.8 242.5 L6.4 236.8 L5.4 231.1 L7 224 L5.9 216.9 L5.7 211 L7.3 203.7 L6.7 196.5 L7.3 192.4 L8 189.2 L9.5 184.9 L9.1 180.4 L8.6 172.6 L5.5 165 L7.9 158.2 L6.4 154.5 L7.9 150.5 L2.5 146.4 L7.8 138.7 L5.6 134.5 L5.2 130.6 L5.9 127.3 L6.5 123.7 L6.5 119.9 L5.1 112.8 L6.7 107.5 L5.2 103.9 L1.3 100.6 L5.8 97.3 L4.9 91.4 L6.1 84.8 L5 80 L8.1 73.8 L7.7 70.2 L8.5 66.3 L6.5 61 L7.5 55 L7.1 50.1 L9.1 45.6 L9.2 39.7 L9.6 34.8 L6.5 30.9 L8.6 24.7 L7.1 17.4 L9.1 13.8 L9.4 7 Z'/%3E%3C/svg%3E");
  --mascara-impresso-quadrado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='M7 8.4 L12.8 7.2 L18.6 8.1 L25.8 6.1 L29.6 6.8 L35.9 3.3 L40.3 9.5 L43.9 5.9 L51.5 6 L54.7 4.9 L60.8 4.8 L68 5.8 L74.3 6.8 L79.8 5.2 L87.5 7.5 L91.9 8.7 L95.6 2.6 L102.2 9.2 L108.7 6.2 L114.7 6.1 L118.8 6.9 L125.4 11.2 L133.1 6.4 L139.6 8.5 L146.5 6.7 L149.9 7.7 L154.1 7.3 L162 7.4 L167.5 5.7 L174.1 7.8 L180.8 5.1 L185.7 5.3 L190.5 4.5 L194.3 4.3 L201.9 5.1 L209.7 4.2 L216.2 5.3 L223.8 8.7 L228.1 7.1 L231.7 8.6 L236.8 7.9 L244.1 7.2 L249.3 8.7 L253.7 7.8 L259.6 8 L267.6 8.9 L274.3 7.7 L279.8 8.3 L285 4.8 L291.1 7.7 L298.2 2.8 L302.1 6.3 L308.6 6.2 L315.2 5.4 L320.6 7.5 L327.8 6.4 L331.4 9.4 L338.1 6.2 L341.6 6.1 L348.9 5.3 L352.3 7.7 L359.8 5.8 L363.8 8 L371.2 7.6 L378.8 9.1 L386 8.9 L389.9 9.6 L393 8.4 L393 7 L393.2 12.4 L394.3 18.3 L392.9 24.9 L392 28.7 L393.5 32.4 L394 40 L393.9 44.4 L393.5 50.4 L392.4 55.9 L392.1 59.3 L393 65.4 L390.3 69.4 L393 75.3 L390.4 79.8 L393.2 85.6 L391 90.3 L392.4 98 L392.8 103.6 L393.2 109 L394.6 113.3 L392.5 117.3 L392.5 122.1 L392.3 126.4 L391.5 134.1 L391.6 137.6 L392.2 144.6 L394.6 152.4 L395.6 158.7 L393.3 163.8 L395.5 169.3 L393.5 173.8 L392.5 180.7 L391.7 187.8 L394.9 193.2 L392.3 198 L392.9 202.9 L391.2 210.2 L392.3 213.5 L392.1 216.6 L395.5 222.3 L389.7 227.9 L392.1 235 L392.4 242.8 L391 247.3 L392.3 253.3 L393.5 261.1 L388.4 267.9 L392.2 273.9 L391.4 280.7 L392.1 285.6 L390 291 L392.4 298.5 L392.4 302.4 L390.2 309.2 L393.3 316.8 L393.8 320.9 L393.3 326.8 L394.3 333.7 L393.2 337.1 L393 341.8 L390.3 347.7 L393 351.3 L393.2 357.3 L393.5 361.8 L396.4 368.1 L394.2 372.1 L395.1 380 L393.4 385.2 L391.7 389.4 L392 392.9 L393 393 L393 392.3 L390.3 390.9 L387.1 391.2 L381.3 393 L373.4 389.3 L368.5 394.2 L364.9 392.6 L361 391.7 L357.7 393 L352.2 395 L346.5 396.4 L343.1 395.5 L335.4 395.7 L330.8 395.7 L322.9 393.5 L316.5 392.3 L313.2 391.5 L310.1 395 L306.4 391.1 L302 392.5 L298.7 392.9 L291 393.3 L287.1 393.7 L282.4 394 L277.1 391.7 L269.9 394.2 L266 393.5 L262.5 392.9 L258.7 393.1 L253.4 390.6 L248.3 393.3 L243 392.5 L239.9 393.7 L232.6 394.2 L228.5 393.9 L220.8 393.4 L216.3 392.5 L212.6 393.8 L207.8 394 L202.8 393.3 L198.7 394.9 L193.4 395.5 L185.6 392.9 L177.9 395.1 L174.4 396.9 L171.1 394.2 L167.3 391.4 L159.6 393.3 L155.2 390.7 L148.1 390.2 L143.7 394.1 L139.8 393.2 L134.2 394 L126.6 392.2 L121.3 392.7 L114 393.8 L110.5 392.6 L107.4 391.8 L102.1 393.5 L99 393.6 L91.2 392.9 L84.2 394 L80.8 393.4 L74.1 394.1 L66.9 394.5 L63.4 393.4 L58.6 393.7 L55.4 394.6 L47.7 396.1 L43.5 392.6 L36.7 393.4 L32.2 394.6 L28.7 394.3 L24.5 393.3 L20.5 393.4 L13.5 393.6 L7 392.3 L11.6 393 L6.7 388.1 L7.5 380.2 L5.1 376.5 L7.4 369.9 L5.8 363.3 L6 356.3 L6.2 350 L7.5 344.9 L5.1 338.8 L5.6 330.9 L6.9 326.2 L7.9 318.7 L8.1 311 L6.5 304 L7.8 297.9 L6.9 294.6 L6.2 289.4 L6.4 284.5 L7.8 277.1 L7 273.6 L9 265.7 L9.7 258.3 L8.7 252.5 L7.7 247.8 L4 241.9 L6.5 234.7 L8 231.6 L5.2 228.2 L7 220.5 L5.3 214 L5.6 210 L8.8 202.5 L7.1 199 L7.1 194.9 L5.2 187.4 L8.7 183.7 L3.2 178.7 L6.3 172.5 L10.3 165.6 L4.9 160 L6.7 152.3 L7 148.4 L8.5 143.8 L8.6 136.7 L6.9 133.1 L7.9 129.1 L7.2 125.7 L7.9 118.8 L8.8 114.1 L7.6 111 L7.7 103.5 L8 95.6 L8.5 87.7 L5.9 83.6 L8.4 76.2 L6.7 68.6 L7.5 62.6 L7.5 58.7 L4.8 54.6 L6 51.1 L5.9 47.3 L4.3 43.3 L4.9 36.5 L5.2 30.4 L7.2 24.3 L8.1 17.7 L8.9 13 L11.6 7 Z'/%3E%3C/svg%3E");
  --textura-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  --textura-fibras: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16  0 0 0 0 .13  0 0 0 0 .11  0 0 0 -.62 .33'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
  --textura-kraft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.35' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.24  0 0 0 0 0.12  0 0 0 -0.9 0.62'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23k)'/%3E%3C/svg%3E");
  --grade-caderno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 .5H48M.5 0V48' fill='none' stroke='rgb(42,33,28)' stroke-opacity='.13' stroke-width='1' stroke-dasharray='2 4'/%3E%3C/svg%3E");
  --grade-noite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 .5H48M.5 0V48' fill='none' stroke='rgb(237,230,218)' stroke-opacity='.12' stroke-width='1' stroke-dasharray='2 4'/%3E%3C/svg%3E");
  /* o corpo de cada borda rasgada (a folha pinta o próprio fundo dentro dele) */
  --mascara-rasgo-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56 L0 30.3 L4.1 29.5 L11.9 25.9 L15.4 29.5 L18.7 30.1 L25.6 27.5 L28.7 21.1 L35.3 28.1 L41.8 25 L46.6 28.4 L52.9 33.7 L57.3 22.4 L65.3 27.8 L73.4 26.1 L81.9 29 L87.3 26.8 L94.9 30.4 L100.4 30.8 L107.7 24.9 L113.6 27.8 L119.6 28.7 L125.1 24.6 L134.1 21.4 L142.9 24.1 L146 21.7 L152.7 20.4 L157.2 25.2 L162 18.8 L167.2 25.3 L173.7 27.4 L179 27.2 L183.4 27.9 L187.4 28.8 L194.5 28.8 L198 31.1 L205.2 29.8 L211.8 30.8 L219.1 30.1 L225.4 34.7 L230.1 35.1 L233.2 31.4 L236.6 30.7 L243 30.1 L251.4 34.2 L258.5 31.5 L261.7 28.1 L268.9 28.6 L276.3 29.3 L279.8 30.7 L288.2 32.2 L295.9 33.9 L303 34.8 L308.5 34.9 L315 35 L321.5 29.7 L329.7 37.4 L337.2 37.1 L345.2 34.5 L348.4 37.3 L352.7 37.6 L359.4 38.2 L362.5 34.4 L366.7 33 L373.7 33.4 L378.6 33.8 L384.2 33.5 L392.5 29.7 L397.4 27.6 L405.4 30.6 L414.1 26.8 L419.8 26.7 L425.3 28.7 L430.2 30.1 L435.9 21.1 L440.6 28.1 L447 30.1 L451.1 31.1 L458.8 31.7 L462.5 28 L469.3 26 L475.2 32.8 L478.4 28.3 L484.6 31.7 L493.6 26.2 L500.8 25.5 L509.2 25.1 L513.4 31.6 L520.3 22.5 L528.2 24.2 L532.5 25.4 L541.3 23.3 L546.2 25.6 L551.3 21.4 L557.6 26 L560.8 23.3 L565.8 27.3 L569.7 26.5 L577.8 28.8 L583.7 27 L590.1 31.6 L594 30.3 L598.6 31.6 L606.8 31.8 L610.7 31.6 L616.6 26 L619.8 33.8 L625.2 32.7 L631.2 35.9 L639.9 32.3 L645.7 27.5 L653.6 31.5 L658.5 27.5 L667.1 27.3 L670.2 27.9 L677.3 29.2 L684.1 28.9 L687.8 31.7 L692 32.5 L697.2 32.7 L701.2 32.2 L708 35.1 L714.7 37.9 L722.1 38.3 L727 35.9 L731.3 39.8 L735.1 35.5 L739.7 34.5 L745.2 38 L750.7 32.1 L755.8 36.9 L763 34.7 L772 34.3 L777.9 28.9 L784.6 32.9 L788.7 28 L792.7 28.6 L799.2 27.4 L802.6 27.1 L808.2 28.5 L813.4 26.8 L819.1 31.1 L823.3 28.2 L826.4 32.5 L833.6 32.8 L839.1 31.7 L848 33.2 L856.4 32.8 L864.3 30.4 L872.6 31.2 L880.2 28.4 L883.6 27.5 L886.7 27.1 L893.4 25.2 L900.4 24.6 L906.8 24.7 L915.8 24.3 L923.4 20.5 L927.9 17.5 L931 21.8 L936 23.6 L942.2 31.4 L945.6 24.9 L948.9 27.2 L954.7 23.7 L961.4 24.2 L966.9 27.6 L972.1 27 L978.5 27.8 L983.3 26.8 L986.5 27.8 L991.9 32.2 L995.2 32.8 L998.6 32.3 L1004.5 32.6 L1010.6 32.1 L1016.4 31.9 L1023 26.6 L1028.8 23.5 L1034.4 29 L1039 28.3 L1046.7 28 L1055.4 29.6 L1059.1 30.8 L1065.8 28.6 L1072.9 30.8 L1079.7 33 L1084.2 35.1 L1092.5 35 L1095.6 31.9 L1100.3 36.6 L1104.3 34.2 L1110.2 35.5 L1116.2 34.6 L1124 36.4 L1132 37.8 L1139.5 35 L1143.4 37 L1148.1 35.9 L1152.2 34.7 L1158 32 L1163.6 32.6 L1169.4 36.9 L1176.4 28.6 L1183.7 31.6 L1187.6 29.7 L1192.8 28.3 L1199.2 33.1 L1207.7 30.9 L1212.5 30.6 L1221.1 34.5 L1226.3 31.8 L1231.6 32.2 L1238 34.5 L1246 33 L1253.6 34.1 L1256.7 31.7 L1263.1 33.3 L1271 26.9 L1278.7 19.7 L1282.2 27.9 L1289.7 26.7 L1294 26.6 L1301.6 23.6 L1310.4 24.6 L1316.6 24.7 L1325.1 23.3 L1332.1 26.4 L1340.1 27.6 L1347 26.4 L1354.8 26.9 L1358.6 29.2 L1363.9 26.5 L1369.5 27.6 L1372.8 22.5 L1376.9 26.6 L1383.4 27.9 L1388.5 29.4 L1394.4 28.7 L1402.7 27.5 L1411.4 28 L1417.7 28.8 L1423.1 29.1 L1430.7 24.1 L1436.1 25 L1440 30.3 L1440 56 Z'/%3E%3C/svg%3E");
  --mascara-rasgo-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56 L0 31.1 L5.5 37.8 L13.3 26.3 L21.8 27.2 L26 28.8 L33.7 25.8 L39.9 24.3 L44.5 25.1 L53.3 23.3 L58.1 22.6 L64 25.9 L72.3 26.4 L80.5 25 L88.3 27.7 L95 27.8 L101.7 26.8 L109.8 31.7 L117.2 29.9 L120.3 30.1 L125.8 28.6 L130.5 25.1 L133.8 25 L137.5 29.7 L140.9 24.3 L144.8 27.8 L148.2 27.6 L151.3 24.5 L159.4 26.9 L163.7 24.6 L169.9 29.2 L177.8 28.8 L185 34.8 L191.4 28.5 L195.1 28.6 L202.8 30.1 L206.7 31.6 L212.1 28.5 L220.5 35 L224.9 38 L231.8 36.6 L235 41.5 L238.3 37.9 L242.7 33.4 L246.7 33.1 L251.6 33.4 L255.7 35.5 L264.3 31.2 L269.2 31.9 L272.9 29.9 L279.3 27 L283.6 29.3 L292 33 L298.9 33.4 L302.6 34.2 L310.4 34.7 L317.3 33.3 L321.1 35.6 L329.5 36.7 L332.6 33.7 L340.2 36.2 L344.5 34.5 L351.2 31.6 L355.7 34.6 L360.4 34.7 L366.5 33.5 L373.8 28.4 L379.6 27.5 L386.7 29.5 L390.5 25.4 L397.7 26.6 L404.2 19.8 L411 24.3 L418.7 27.9 L422.6 23 L428.6 29.9 L436.2 29 L443.2 32.3 L450.7 32.5 L458.9 26 L465.1 30.6 L468.9 29.6 L473.9 27.1 L478.1 26.4 L482.6 25.2 L486.7 21.3 L492.3 26.1 L501.1 22.3 L509 22.4 L515 22.7 L520.4 24.3 L523.6 23.9 L532.1 23.3 L537.3 24.8 L540.5 29.2 L547.9 26.9 L552.3 30.7 L556.8 25.1 L565 30.6 L568.5 30.7 L576.8 31.6 L580.8 30.6 L586 33.7 L594.6 35.7 L599.3 33.5 L602.8 33.5 L605.9 33.4 L610.3 33.5 L614.3 32.3 L617.5 30.7 L625.6 31.6 L633 28.7 L638.5 30.3 L642.3 31.9 L649.1 30.5 L654.8 26.9 L661.1 32.2 L665.8 35.3 L671.9 33.8 L679.2 38.6 L684.9 37.3 L689.5 38.6 L694.4 34.7 L697.6 41.2 L700.8 38.7 L706.6 34.5 L710.5 37.8 L718.2 36.8 L726.5 29.8 L730.2 31.3 L738.2 30.7 L741.5 30.7 L747 26.4 L750.9 26.9 L754.7 27.7 L760.8 25.4 L768 30.5 L777 30.1 L784.6 31.8 L788.8 32 L796.3 31.2 L802.5 27.7 L806.8 27.9 L813 27.7 L821.8 29.9 L827.7 28 L835.2 28.9 L844 28.7 L849.5 29.2 L855 22.9 L858.2 23.7 L862.4 25 L867.5 24.6 L875.7 23.5 L884.4 23.4 L892.6 25.3 L897.6 24.8 L902.3 24 L905.7 31.6 L910.6 28.7 L918.8 24.1 L923.5 32.3 L929 33 L932.8 28.3 L937.6 29.1 L940.7 32.8 L949.5 32 L952.8 31.4 L956 32.5 L959.5 30.5 L962.6 31.4 L966.3 27.6 L970.7 29.1 L978.2 21.7 L987 27.7 L992.8 26.9 L998.6 29.9 L1003.9 29.9 L1010.1 30.4 L1014.9 31.6 L1019.8 34.3 L1024.3 32.1 L1028.1 35.6 L1032.2 37.2 L1036.8 33.6 L1043.8 35.4 L1051.5 34.3 L1059.6 35 L1067.2 38.2 L1072.7 37.2 L1075.9 33.5 L1080.9 34.8 L1084.5 30.6 L1093.2 31.9 L1101.5 30.4 L1109.1 30.8 L1112.6 32.1 L1117.1 30.2 L1120.9 30.2 L1128.5 33.5 L1134.8 33.9 L1139.4 32 L1146.9 32 L1151 32.5 L1158.9 31.7 L1165.6 29.5 L1169.9 35.3 L1173.7 30.2 L1181.5 32 L1184.9 31.9 L1191.6 27.1 L1199.3 28.6 L1207.8 26.1 L1216.7 25.6 L1221.6 21.7 L1227.9 22.5 L1232.9 26 L1237.6 23.9 L1241.2 22.1 L1246 27.5 L1254.6 26.9 L1262.1 31 L1265.1 25.4 L1271.9 36.6 L1276.5 29.1 L1279.8 30.5 L1286.8 30.7 L1290 31.2 L1296.3 26.2 L1303.5 27.7 L1309.5 24.7 L1313.7 29.2 L1319 23.8 L1326.3 27.7 L1332.5 28.2 L1340.7 23.3 L1345.2 28.7 L1349.8 24.8 L1354.7 29 L1362.4 29 L1367 30.4 L1375.9 31.3 L1382.1 30 L1390.8 35.5 L1395.6 35 L1403.2 35.1 L1409.8 33 L1414.5 36.7 L1423.4 32.9 L1430.8 34.1 L1433.9 34 L1440 31.1 L1440 56 Z'/%3E%3C/svg%3E");
  --mascara-rasgo-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56 L0 34.6 L3.2 30.7 L11.9 33.9 L15 33.4 L20.5 29.1 L26.2 28.1 L33.5 27.7 L39.9 26.2 L47.3 30.1 L50.9 28.1 L58.8 25.6 L63.1 29.2 L69 26.3 L74.1 30.9 L81.9 31 L87.1 29.9 L93.5 29 L99.6 23.7 L104.1 29.7 L108 26.1 L114.7 34.9 L120.4 35.4 L127 28.7 L135.5 25.7 L143.5 24.5 L149.1 26.3 L153.2 23.3 L156.8 24.8 L162.9 21.5 L169.8 23.9 L174.4 23 L182.4 24.8 L188.4 27.4 L195.6 27.4 L201.8 26.1 L207.1 28.8 L215.4 31.6 L222.8 31.4 L227.4 35.6 L233.8 28.5 L238.9 32.3 L244.9 31 L248.6 32.5 L256.5 31.7 L264.1 29.1 L271.8 27.1 L276.8 30.9 L283.8 33.7 L290.6 32.7 L293.8 32.3 L298.5 34 L303.8 39 L311.5 34.5 L318.6 37.2 L322.2 37.8 L327 38.2 L332.2 33.7 L340.3 37.1 L345.4 37.5 L352.2 33.3 L356.5 35.9 L365.2 32 L370.1 32.2 L376 27.2 L382.1 29.2 L386.9 26.5 L392.4 26.7 L398.4 26 L401.6 26.3 L409.7 27.6 L416.3 26.1 L422.6 26.7 L425.9 26.6 L429.4 25.8 L433.4 21.9 L439.8 24.5 L445.5 27.1 L450.9 25.9 L459.5 28.9 L463.6 29.5 L470.2 26.1 L475.1 29.5 L480.5 25.3 L489.4 25.8 L493.9 23.8 L502.8 26 L507.1 23.8 L515.9 21.2 L520 26.2 L525.8 26 L530.2 28.6 L538 26.3 L541.6 29.8 L545.5 26.8 L549 29.9 L552.7 29.8 L557.1 33.5 L563.9 30.4 L570.3 36.4 L573.8 33.4 L582.4 37.7 L588.9 37.1 L596.7 35.6 L602.3 34.7 L606.4 33.9 L612 32 L615.8 35.7 L624.2 31.8 L628.4 34.1 L635.8 34 L641.9 33.8 L648.7 31.5 L652.5 29.4 L655.8 33.3 L659.1 32.3 L663.6 34.2 L668.8 31.6 L674.5 30.2 L683.4 34.1 L687.1 35.7 L693.1 32.6 L700.4 36.1 L705.9 35.6 L713.4 36.2 L721.5 37.8 L730.4 27.8 L736.3 22.8 L740.5 26.6 L744.8 29.7 L752.7 25.2 L756.3 17.9 L764.4 21.8 L772 21.9 L780.6 26.4 L786.7 25 L795.2 25.5 L800.2 24.1 L808.9 31 L813.7 25.6 L820.1 31 L826.5 26.9 L832 28.9 L835.9 30.5 L844 29.2 L849.8 29.4 L853.2 28.9 L859.8 20.9 L863.5 29.6 L869.9 29.5 L878.7 27.9 L881.9 29 L888.3 28.5 L892.7 26.1 L897.4 28.8 L903.4 31.7 L908.8 33.3 L912.9 31.4 L921.2 33.4 L926.4 33.4 L931.8 40.5 L937.1 38 L940.8 33.8 L948.7 35.9 L956.2 33.9 L962.9 33.6 L968.8 34.4 L973.4 29.3 L977.7 32.8 L983.5 34.6 L987.4 26.7 L993.8 29.9 L1001.5 32.4 L1009.3 30.2 L1013.8 27.2 L1022.2 28 L1029.6 31.4 L1033.7 32.1 L1039.5 31.1 L1044.1 29.1 L1050.2 32.8 L1054.4 32.1 L1059 30.7 L1065.9 29.8 L1072.5 31.9 L1075.7 33.1 L1081.4 32 L1085.1 29.6 L1093.6 23.7 L1101.9 26.6 L1106.1 20.1 L1114.7 22 L1119.6 21.9 L1123.7 21.5 L1130.7 23.3 L1136.2 22.2 L1139.7 22.4 L1143.4 21.6 L1151 26 L1155.3 23.2 L1162.7 28 L1170.3 26 L1176.3 29.5 L1181.2 30.2 L1188.3 32 L1194.7 29.6 L1198.8 35.2 L1203.6 29.6 L1211.8 31.7 L1217.8 32 L1223 28.4 L1226.5 29.5 L1233.6 34.1 L1241.8 28.3 L1246.1 31.5 L1254 27.8 L1258.9 29.5 L1264.1 36.6 L1267.1 30.6 L1274.7 35.4 L1278 35.9 L1285.4 34.3 L1288.7 36.3 L1292.3 33.1 L1298.5 38.4 L1302.5 38.3 L1307.1 35.9 L1314.2 36.7 L1318.8 35 L1327.6 36.8 L1336.3 31.1 L1343.4 34.4 L1349.1 32.4 L1354 30.5 L1362.8 27.2 L1369.6 29.6 L1374.2 30.5 L1377.7 20.9 L1386.2 29.2 L1389.8 25 L1393.3 26.5 L1399.9 29.6 L1407.2 30.2 L1411.7 29.2 L1416.6 30.2 L1422.3 26.8 L1429.8 26.7 L1438 28.8 L1440 34.6 L1440 56 Z'/%3E%3C/svg%3E");
  --mascara-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); /* o X de limpar a busca */
  --mascara-gasto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 0 1 1 0'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  /* 2.10 Opacidade */
  --opac-apagado: .26;  /* palavra ainda não dita, peça fora de foco */
  --opac-textura: .3;   /* poeira e arranhão por cima do vídeo */
  /* 2.11 Filtros de foto e vídeo (receitas prontas; os url() apontam para o sprite da página) */
  --filtro-papel: url(#filtro-papel);
  --filtro-xerox: grayscale(1) contrast(1.6) brightness(1.05);
  --filtro-riso-lilas: url(#filtro-riso-lilas);
  --filtro-riso-menta: url(#filtro-riso-menta);
  --filtro-riso-rosa: url(#filtro-riso-rosa);
  --filtro-anos80: sepia(.55) saturate(.9) hue-rotate(-12deg) contrast(.82) brightness(1.08);
  --filtro-tela: url(#filtro-tela) saturate(1.1);
  --filtro-negativo: invert(1) sepia(.4) hue-rotate(210deg) saturate(1.6); /* foto em negativo lilás (thumbs) */
  --filtro-fotocopia: grayscale(1) brightness(1.08) blur(var(--traco));
  --tela-linha: 1px;    /* linha de varredura da tela antiga */
  --tela-passo: 3px;
  /* 2.12 Arte final: medidas em pixels da arte (post e Reels com 1080 de largura, thumb com 1280).
     Numa prancha, 1 pixel da arte = var(--px) = calc(100cqi / 1080). */
  --arte-margem: 72;
  --arte-seguro-esq: 60;    /* Reels: fora disso, a interface do Instagram cobre */
  --arte-seguro-dir: 150;
  --arte-seguro-topo: 220;
  --arte-seguro-pe: 360;
  --arte-corte: 240;        /* o que a grade do perfil corta do Reels (vira 4:5) */

  /* 2.13 Redes: o acervo (2026-10-01). Medidas em pixels da arte, como as de cima. */
  --px-fora: 1px;           /* fora de uma prancha, 1 pixel da arte vale 1px de tela */
  --lh-mao: 1;              /* a Shantell, no tamanho ajustado, cabe inteira numa linha de 1 */
  --lh-tela: 1.2;
  --desfoque-1: 6;          /* fora de foco, mas ainda dá pra ler */
  --desfoque-2: 14;         /* precisa dos óculos */
  --desfoque-3: 26;         /* só a forma da palavra */
  --barra-serie-topo: 56;   /* a barra da série: distância da borda e letra */
  --barra-serie-letra: 30;
  /* os óculos da vó: a geometria do desenho (#oculos, viewBox 1000 × 560), em fração da largura */
  --oculos-lente-dx: .25;   /* cada lente a um quarto da largura, para cada lado do centro */
  --oculos-lente-y: .2;     /* altura do centro das lentes */
  --oculos-lente-rx: .196;  /* raio horizontal da lente */
  --oculos-lente-ry: .157;  /* raio vertical da lente */
  --oculos-proporcao: 1000 / 560;
  --oculos-arte: 460;       /* largura padrão dos óculos numa peça */
  --lente-borda: 94%;       /* onde o foco começa a se desmanchar na beira da lente */
  --emenda-l: 260;          /* largura do que atravessa de uma lâmina para a próxima */
  /* as molduras da casa (iteração 2) */
  --selo-dente: 14;         /* raio do furo da serrilha do selo */
  --cantoneira: 72;         /* o canto de papel que segura a foto no álbum */
  --moldura-foto: 14;       /* a borda branca da foto revelada */
  --pauta: 64;              /* distância entre as linhas do bilhete e da caderneta */
  --caderneta-margem: 120;  /* onde corre a linha vermelha da margem */
  --ima: 170;               /* o ímã de geladeira (a carinha da mascote) */
  --janela-relevo: 4;       /* a janela do computador da vó (as medidas do Reels da paciência) */
  --janela-barra: 58;
  --janela-sombra: 10;
  --janela-botao: 40;
  --balao-raio: 40;
  --balao-canto: 6;         /* o canto reto do balão aponta quem fala */
  /* os tratamentos de letra (iteração 3) */
  --tarja-bloco: .2;        /* o quadradinho da tarja, em fração da letra censurada */
  --roda-raio: 84;          /* o círculo da frase em roda (viewBox 200 × 200) */
  --roda-letra: 17px;       /* a letra da roda, em unidades do viewBox */
  --ponto: 22;              /* o lado de um ponto de bordado */
  --ponto-fio: .32;         /* a grossura da linha, em fração do ponto */
  --linhas-traco: 6;        /* o sublinhado de cada linha */
  --linhas-distancia: .14em;
  --ima-relevo: .035em;     /* a espessura do plástico da letra de ímã */
  /* duas cores (gerado por duotone.py a partir das cores acima; a sombra vira a primeira) */
  --filtro-duotone-ameixa: url(#duotone-ameixa);
  --filtro-duotone-tinta: url(#duotone-tinta);
  --filtro-duotone-tinta-manteiga: url(#duotone-tinta-manteiga);

}

/* 3. FOLHAS — contexto de cor ---------------------------------------------
   Toda superfície declara em que papel está (data-folha). Os componentes só
   usam os tokens de contexto (--fundo, --texto, --linha-cor…), então funcionam
   em qualquer folha, clara ou escura, sem par .light/.dark escrito à mão.
   Toda folha clara repõe o conjunto inteiro: uma folha menta dentro de uma
   folha tinta volta a ter texto cacau (a folha mais próxima sempre manda). */
:root,
[data-folha="papel"], [data-folha="branco"], [data-folha="lilas"], [data-folha="menta"],
[data-folha="rosa"], [data-folha="manteiga"], [data-folha="kraft"] {
  --fundo: var(--papel);
  --fundo-2: var(--papel-2);
  --fundo-3: var(--papel-3);
  --superficie: var(--branco);
  --superficie-2: var(--branco-2);
  --texto: var(--tinta);
  --texto-2: var(--tinta-2);
  --texto-3: var(--tinta-3);
  --linha-cor: var(--tinta-a16);
  --linha-media-cor: var(--tinta-a24);
  --linha-forte-cor: var(--tinta);
  --link: var(--tinta);
  --sublinhado: var(--tomate);
  --foco: var(--tinta);
  --foco-fundo: var(--manteiga);
  --grade: var(--grade-caderno);
  --tira-fundo: var(--branco);
  --sombra-cor: var(--tinta-a24);
  --mistura: multiply;   /* como tinta e carimbo assentam no papel */
  --principal-fundo: var(--tinta);   /* botão principal: cacau no claro, papel no escuro */
  --principal-texto: var(--papel);
  --marcado: var(--papel);           /* o visto dentro da caixa marcada */
  --chave-ligada: var(--tinta);      /* interruptor ligado */
  --erro-texto: var(--tomate-tinta);
  --ok-texto: var(--menta-tinta);
  --rasgo-fibra: var(--branco);      /* o miolo branco da borda rasgada */
  --rasgo-sombra: var(--tinta-a16);
  /* ícones desenhados dentro dos campos (lupa, seta): a cor acompanha a folha */
  --icone-lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A211C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
  --icone-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A211C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: light;
}
[data-folha="branco"] { --fundo: var(--branco); --fundo-2: var(--branco-2); --fundo-3: var(--branco-3); --superficie: var(--papel); --superficie-2: var(--papel-2); }
[data-folha="lilas"] { --fundo: var(--lilas); --fundo-2: var(--lilas-2); --fundo-3: var(--lilas-3); --texto-3: var(--tinta-2); --linha-cor: var(--tinta-a24); --linha-media-cor: var(--tinta-a40); }
[data-folha="menta"] { --fundo: var(--menta); --fundo-2: var(--menta-2); --fundo-3: var(--menta-3); --linha-cor: var(--tinta-a24); }
[data-folha="rosa"] { --fundo: var(--rosa); --fundo-2: var(--rosa-2); --fundo-3: var(--rosa-3); --texto-3: var(--tinta-2); --linha-cor: var(--tinta-a24); }
[data-folha="manteiga"] { --fundo: var(--manteiga); --fundo-2: var(--manteiga-2); --fundo-3: var(--manteiga-3); --linha-cor: var(--tinta-a24); }
[data-folha="kraft"] { --fundo: var(--kraft); --fundo-2: var(--kraft-2); --fundo-3: var(--kraft-3); --texto-2: var(--tinta); --texto-3: var(--tinta); --linha-cor: var(--tinta-a24); --linha-media-cor: var(--tinta-a40); }
[data-folha="tinta"] {
  --fundo: var(--tinta);
  --fundo-2: var(--tinta-sup);
  --fundo-3: var(--tinta-sup-2);
  --superficie: var(--tinta-sup);
  --superficie-2: var(--tinta-sup-2);
  --texto: var(--noite-texto);
  --texto-2: var(--noite-texto-2);
  --texto-3: var(--noite-texto-3);
  --linha-cor: var(--papel-a18);
  --linha-media-cor: var(--papel-a32);
  --linha-forte-cor: var(--papel);
  --link: var(--papel);
  --foco: var(--lilas);
  --grade: var(--grade-noite);
  --tira-fundo: var(--papel);
  --sombra-cor: rgb(var(--preto-rgb) / .45);
  --mistura: screen;     /* no escuro, a tinta clara acende em vez de sumir */
  --principal-fundo: var(--papel);
  --principal-texto: var(--tinta);
  --marcado: var(--tinta);
  --chave-ligada: var(--lilas);
  --erro-texto: var(--rosa);
  --ok-texto: var(--menta);
  --rasgo-fibra: var(--papel-a32);
  --rasgo-sombra: rgb(var(--preto-rgb) / .3);
  --icone-lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDE6DA' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
  --icone-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDE6DA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: dark;
}
[data-folha] { background-color: var(--fundo); color: var(--texto); }

/* 4. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--e-9);
  hanging-punctuation: first last;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--letra-texto);
  font-size: var(--fs-texto);
  font-weight: var(--peso-normal);
  line-height: var(--lh-texto);
  color: var(--texto);
  background-color: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  overflow-x: clip;
}
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
p, li, figcaption { text-wrap: pretty; max-width: var(--medida); }
h1, h2, h3, h4 { text-wrap: balance; }
hr { border: 0; border-top: var(--traco-fino) solid var(--linha-cor); margin: var(--e-6) 0; }
abbr[title] { text-decoration: underline dotted; }
code, kbd, samp, pre { font-family: var(--letra-codigo); font-size: var(--fs-codigo); }
kbd {
  display: inline-block;
  padding: 0 var(--e-1);
  border: var(--traco-fino) solid var(--linha-media-cor);
  border-bottom-width: var(--traco-forte);
  border-radius: var(--raio-etiqueta);
  background: var(--superficie);
  line-height: var(--lh-ui);
}
strong, b { font-weight: var(--peso-forte); }

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-color: var(--sublinhado);
  text-decoration-thickness: var(--traco-forte);
  text-underline-offset: .22em;
  transition: text-decoration-thickness var(--t-rapido) var(--ease-papel), color var(--t-rapido) var(--ease-papel);
}
a:hover { text-decoration-thickness: var(--traco-caneta); }

::selection { background: var(--manteiga); color: var(--tinta); }

/* Foco: anel sólido da tinta, afastado da peça. Declarado com especificidade
   de componente no fim da folha para nenhum botão engolir o anel (bug 8 do DS v4). */
:focus-visible {
  outline: var(--traco-caneta) solid var(--foco);
  outline-offset: var(--e-1);
  transition: outline-offset 0s;
}

/* acessibilidade: só para leitor de tela (+ apelido do shader.se) */
.visualmente-oculto, .a11y-hidden {
  position: absolute !important;
  width: var(--traco-fino); height: var(--traco-fino);
  padding: 0; margin: calc(var(--traco-fino) * -1);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* pular para o conteúdo (+ apelido do shader.se) */
.pular, .a11y-skip-to-content {
  position: fixed;
  top: var(--e-3);
  left: var(--e-3);
  z-index: var(--z-recado);
  padding: var(--e-3) var(--e-5);
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--raio-etiqueta);
  font-weight: var(--peso-forte);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--e-6)));
}
.pular:focus, .a11y-skip-to-content:focus { transform: none; }

/* 5. TIPOGRAFIA -------------------------------------------------------------
   Quatro famílias, cada uma num papel só. Os h1–h6 do HTML já saem no papel
   certo; as classes .t-* aplicam o papel em qualquer elemento. */
.t-manchete {
  font-family: var(--letra-manchete);
  font-weight: var(--peso-normal);
  font-size: var(--fs-manchete);
  line-height: var(--lh-manchete);
  letter-spacing: var(--ls-zero);
  text-transform: uppercase;
  font-kerning: normal;
}
.t-manchete--m { font-size: var(--fs-manchete-m); }
.t-manchete--p { font-size: var(--fs-manchete-p); }
.t-manchete--contorno { font-family: var(--letra-manchete-contorno); }
/* acento na Spot: ela não tem Ã, É, Ç prontos, mas tem os acentos soltos (´ ` ~ ¨).
   O JS troca cada letra acentuada por <span class="acento" data-marca> e o acento é o
   glifo da própria Spot encaixado em cima (como no painel de glifos do Illustrator).
   Circunflexo sai do › girado; cedilha, da vírgula. O texto certo fica para o leitor
   de tela. Medidas em em, tiradas da fonte (1000 unidades, maiúscula com 737). */
.acento { position: relative; display: inline-block; }
.t-manchete.tem-acento, .tem-acento .t-manchete { line-height: var(--lh-manchete-acento); }
.acento::after {
  position: absolute;
  top: 50%;                        /* com line-height 0, a linha de base casa com a da letra */
  left: 50%;
  line-height: 0;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: 50% var(--acento-origem, 0);
  transform: translate(calc(-50% + var(--acento-x, 0em)), var(--acento-y, 0em)) rotate(var(--acento-giro, 0deg)) scale(var(--acento-escala, 1));
}
.acento[data-marca="agudo"]::after { content: "´" / ""; --acento-x: .091em; --acento-y: -.174em; }
.acento[data-marca="grave"]::after { content: "`" / ""; --acento-x: -.02em; --acento-y: -.174em; }
.acento[data-marca="til"]::after { content: "~" / ""; --acento-y: -.629em; }
.acento[data-marca="trema"]::after { content: "¨" / ""; --acento-y: -.172em; }
.acento[data-marca="circunflexo"]::after { content: "›" / ""; --acento-origem: .076em; --acento-giro: -90deg; --acento-escala: .6; --acento-y: -.586em; }
.acento[data-marca="cedilha"]::after { content: "," / ""; --acento-origem: .138em; --acento-escala: .55; --acento-y: .23em; }
/* só o que a Spot não tem de jeito nenhum (ñ não, mas ø, ß, emoji…) passa a manchete para a Sink */
.t-manchete.com-acento {
  font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta);
  letter-spacing: var(--ls-etiqueta);
}

h1, .t-h1 {
  font-family: var(--letra-titulo);
  font-weight: var(--peso-h1);
  font-size: var(--fs-h1);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-justo);
  font-optical-sizing: auto;
}
h2, .t-h2 {
  font-family: var(--letra-titulo);
  font-weight: var(--peso-h2);
  font-size: var(--fs-h2);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-leve);
  font-optical-sizing: auto;
}
h3, .t-h3 {
  font-family: var(--letra-titulo);
  font-weight: var(--peso-h3);
  font-size: var(--fs-h3);
  line-height: var(--lh-titulo-2);
  letter-spacing: var(--ls-leve);
}
h4, .t-h4 {
  font-family: var(--letra-titulo);
  font-weight: var(--peso-h4);
  font-size: var(--fs-h4);
  line-height: var(--lh-titulo-2);
  letter-spacing: var(--ls-sutil);
}
h5, .t-h5 {
  font-family: var(--letra-texto);
  font-weight: var(--peso-forte);
  font-size: var(--fs-h5);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-leve);
}
h6, .t-h6 {
  font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta);
  font-weight: var(--peso-normal);
  font-size: var(--fs-h6);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-etiqueta);
}
.t-titulo-leve { font-family: var(--letra-titulo); font-weight: var(--peso-leve); letter-spacing: var(--ls-leve); }
.t-citacao {
  font-family: var(--letra-titulo);
  font-style: italic;
  font-weight: var(--peso-medio);
  font-size: var(--fs-h3);
  line-height: var(--lh-titulo-2);
  letter-spacing: var(--ls-sutil);
}
.t-texto-g { font-size: var(--fs-texto-g); line-height: var(--lh-texto); }
.t-texto { font-size: var(--fs-texto); line-height: var(--lh-texto); }
.t-texto-p { font-size: var(--fs-texto-p); line-height: var(--lh-legenda); }
.t-rotulo {
  font-family: var(--letra-texto);
  font-weight: var(--peso-semi);
  font-size: var(--fs-rotulo);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-zero);
}
.t-legenda {
  font-family: var(--letra-texto);
  font-weight: var(--peso-medio);
  font-size: var(--fs-legenda);
  line-height: var(--lh-legenda);
  letter-spacing: var(--ls-etiqueta);
}
.t-ajuda {
  font-size: var(--fs-ajuda);
  line-height: var(--lh-legenda);
  color: var(--texto-3);
}
.t-etiqueta {
  font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta);
  font-weight: var(--peso-normal);
  font-size: var(--fs-etiqueta);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-etiqueta);
}
.t-tira {
  font-family: var(--letra-texto);
  font-weight: var(--peso-semi);
  font-style: italic;
  font-size: var(--fs-texto-g);
  line-height: var(--lh-ui);
}
.t-nota { font-family: var(--letra-texto); font-weight: var(--peso-leve); font-style: italic; }
.t-numero {
  font-family: var(--letra-numero);
  font-weight: var(--peso-normal);
  font-size: var(--fs-numero);
  line-height: var(--lh-manchete);
  letter-spacing: var(--ls-justo);
  font-variant-numeric: tabular-nums lining-nums;
}
.t-codigo { font-family: var(--letra-codigo); font-size: var(--fs-codigo); line-height: var(--lh-codigo); }
.t-tabular { font-variant-numeric: tabular-nums lining-nums; }
.t-texto-2 { color: var(--texto-2); }
.t-texto-3 { color: var(--texto-3); }
.t-medida { max-width: var(--medida); }
.t-medida-curta { max-width: var(--medida-curta); }

/* 6. MATERIAIS DA COLAGEM ----------------------------------------------------
   Papel, grão, fita, tinta de carimbo, retícula. Tudo gerado por código
   (máscaras e texturas com semente fixa), sem imagem obrigatória. */
:root {
  --tam-fibras: 300px;
  --tam-kraft: 360px;
  --tam-grao: 300px;
  --tam-grade: 48px;
  --tam-gasto: 220px;
  --opac-grao: .06;
  --opac-grao-forte: .1;
}

/* 6.1 Fibras de papel (estático, barato) */
.com-fibras { background-image: var(--textura-fibras); background-size: var(--tam-fibras) var(--tam-fibras); }
.com-kraft { background-image: var(--textura-kraft); background-size: var(--tam-kraft) var(--tam-kraft); }

/* 6.2 Grão animado — dl-grain (designer-landing) */
.grao {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grao);
  pointer-events: none;
  opacity: var(--opac-grao);
  mix-blend-mode: multiply;
  background-image: var(--textura-grao);
  background-size: var(--tam-grao) var(--tam-grao);
  animation: dl-grain var(--t-grao) steps(4) infinite;
}
.grao--local { position: absolute; inset: -50%; z-index: var(--z-base); }

/* 6.3 Caderno quadriculado — .grid-bg (Tide) / .bg-grid (Patch) */
.caderno, .grid-bg, .bg-grid {
  background-image: var(--grade);
  background-size: var(--tam-grade) var(--tam-grade);
  background-position: calc(var(--tam-grade) / -2) calc(var(--tam-grade) / -2);
}
/* grade que esmaece nas bordas (TileGrid do Teak) */
.caderno--esmaece {
  -webkit-mask-image: linear-gradient(transparent 4%, var(--preto-puro) 18% 82%, transparent 96%);
  mask-image: linear-gradient(transparent 4%, var(--preto-puro) 18% 82%, transparent 96%);
}
/* papel pautado: linhas na mesma entrelinha do texto */
.pautado {
  --pauta: calc(var(--fs-texto) * var(--lh-texto));
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--pauta) - var(--traco-fino)), var(--linha-cor) calc(var(--pauta) - var(--traco-fino)) var(--pauta));
  background-position: 0 calc(var(--e-3) - var(--traco-fino));
  background-attachment: local;
}

/* 6.4 Tira de papel rasgado — uma tira por linha, como na legenda do Reels.
   ::before = papel mascarado; ::after = sombra dura da tinta, deslocada. */
.tira {
  --tira-px: .42em;
  --tira-py: .1em;
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: var(--tira-py) var(--tira-px);
  color: var(--tinta);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.tira::before,
.tira::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-fundo);
  -webkit-mask:
    var(--mascara-ponta-esq) left / var(--ponta) 100% no-repeat,
    linear-gradient(var(--preto-puro) 0 0) center / calc(100% - (var(--ponta) * 2) + var(--e-0)) 100% no-repeat,
    var(--mascara-ponta-dir) right / var(--ponta) 100% no-repeat;
  mask:
    var(--mascara-ponta-esq) left / var(--ponta) 100% no-repeat,
    linear-gradient(var(--preto-puro) 0 0) center / calc(100% - (var(--ponta) * 2) + var(--e-0)) 100% no-repeat,
    var(--mascara-ponta-dir) right / var(--ponta) 100% no-repeat;
}
.tira::before { background: var(--textura-fibras), var(--tira-fundo); background-size: var(--tam-fibras) var(--tam-fibras), auto; }
.tira::after { z-index: calc(var(--z-fundo) - 1); background: var(--tinta-a16); transform: translate(var(--sombra-tira-x), var(--sombra-tira-y)); }
.tira--b::before, .tira--b::after {
  -webkit-mask:
    var(--mascara-ponta-esq-b) left / var(--ponta) 100% no-repeat,
    linear-gradient(var(--preto-puro) 0 0) center / calc(100% - (var(--ponta) * 2) + var(--e-0)) 100% no-repeat,
    var(--mascara-ponta-dir-b) right / var(--ponta) 100% no-repeat;
  mask:
    var(--mascara-ponta-esq-b) left / var(--ponta) 100% no-repeat,
    linear-gradient(var(--preto-puro) 0 0) center / calc(100% - (var(--ponta) * 2) + var(--e-0)) 100% no-repeat,
    var(--mascara-ponta-dir-b) right / var(--ponta) 100% no-repeat;
}
.tira--branco { --tira-fundo: var(--branco); }
.tira--papel { --tira-fundo: var(--papel); }
.tira--manteiga { --tira-fundo: var(--manteiga); }
.tira--lilas { --tira-fundo: var(--lilas); }
.tira--menta { --tira-fundo: var(--menta); }
.tira--rosa { --tira-fundo: var(--rosa); }
.tira--kraft { --tira-fundo: var(--kraft); }
.tira--tinta { --tira-fundo: var(--tinta); color: var(--papel); }
.tira--giro-e { transform: rotate(calc(var(--giro-1) * -1)); }
.tira--giro-d { transform: rotate(var(--giro-1)); }

/* 6.5 Etiqueta — nome ou rótulo em Sink sobre um pedaço de papel */
.etiqueta {
  --etiqueta-fundo: var(--manteiga);
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-0) var(--e-2);
  font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta);
  font-size: var(--fs-etiqueta);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-etiqueta);
  color: var(--tinta);
  background: var(--etiqueta-fundo);
  border-radius: var(--raio-papel);
  box-shadow: var(--sombra-colada);
  transform: rotate(var(--giro, calc(var(--giro-1) * -1)));
}
.etiqueta--branco { --etiqueta-fundo: var(--branco); }
.etiqueta--lilas { --etiqueta-fundo: var(--lilas); }
.etiqueta--menta { --etiqueta-fundo: var(--menta); }
.etiqueta--rosa { --etiqueta-fundo: var(--rosa); }
.etiqueta--tinta { --etiqueta-fundo: var(--tinta); color: var(--papel); }
.etiqueta--p { font-size: var(--fs-rotulo); padding: 0 var(--e-2); }

/* 6.6 Fita crepe — pontas picotadas, semitransparente */
.fita {
  --fita-cor: rgb(var(--crepe-rgb) / .86);
  --fita-largura: 104px;
  --fita-altura: 30px;
  --fita-giro: calc(var(--giro-5) * -1);
  position: absolute;
  z-index: var(--z-alto);
  width: var(--fita-largura);
  height: var(--fita-altura);
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--branco-rgb) / .3), transparent 42%, var(--tinta-a04)),
    repeating-linear-gradient(90deg, transparent 0 var(--e-1), rgb(var(--branco-rgb) / .1) var(--e-1) var(--e-2)),
    var(--fita-cor);
  -webkit-mask:
    var(--mascara-ponta-esq-b) left / var(--e-2) 100% no-repeat,
    linear-gradient(var(--preto-puro) 0 0) center / calc(100% - var(--e-3)) 100% no-repeat,
    var(--mascara-ponta-dir-b) right / var(--e-2) 100% no-repeat;
  mask:
    var(--mascara-ponta-esq-b) left / var(--e-2) 100% no-repeat,
    linear-gradient(var(--preto-puro) 0 0) center / calc(100% - var(--e-3)) 100% no-repeat,
    var(--mascara-ponta-dir-b) right / var(--e-2) 100% no-repeat;
  transform: rotate(var(--fita-giro));
  mix-blend-mode: multiply;
}
.fita--transparente { --fita-cor: rgb(var(--branco-rgb) / .5); mix-blend-mode: normal; }
.fita--lilas { --fita-cor: rgb(var(--lilas-rgb) / .78); }
.fita--menta { --fita-cor: rgb(var(--menta-rgb) / .8); }
.fita--rosa { --fita-cor: rgb(var(--rosa-rgb) / .8); }
.fita--p { --fita-largura: 72px; --fita-altura: 22px; }
.fita--canto-esq { top: calc(var(--fita-altura) / -2); left: calc(var(--fita-largura) / -4); }
.fita--canto-dir { top: calc(var(--fita-altura) / -2); right: calc(var(--fita-largura) / -4); --fita-giro: var(--giro-5); }
.fita--topo { top: calc(var(--fita-altura) / -2); left: 50%; translate: -50% 0; --fita-giro: calc(var(--giro-2) * -1); }

/* 6.7 Adesivo — contorno branco de faca em qualquer forma (filtro SVG #adesivo
   do sprite da página: desfoque + limiar = borda arredondada + sombra). */
.adesivo { --filtro-base: url(#adesivo); filter: var(--filtro-base); }
.adesivo--p { --filtro-base: url(#adesivo-p); filter: var(--filtro-base); }
.adesivo--g { --filtro-base: url(#adesivo-g); filter: var(--filtro-base); }
/* adesivo em pílula para texto curto (sem filtro, mais barato) */
.adesivo-pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-4);
  border-radius: var(--raio-adesivo);
  background: var(--adesivo-fundo, var(--lilas));
  color: var(--tinta);
  font-weight: var(--peso-semi);
  box-shadow: 0 0 0 var(--e-1) var(--branco), var(--sombra-solta);
  transform: rotate(var(--giro, calc(var(--giro-2) * -1)));
}

/* 6.8 Carimbo — tinta tomate gasta. Decorativo: o texto também existe
   em aria-label ou ao lado, porque tomate não passa como texto (2,75:1). */
.carimbo {
  --carimbo-cor: var(--tomate);
  display: inline-block;
  padding: var(--e-1) var(--e-3);
  border: var(--traco-caneta) solid var(--carimbo-cor);
  border-radius: var(--raio-etiqueta);
  color: var(--carimbo-cor);
  font-family: var(--letra-manchete);
  font-size: var(--fs-h4);
  line-height: 1;
  letter-spacing: var(--ls-aberto);
  text-transform: uppercase;
  transform: rotate(var(--giro, calc(var(--giro-4) * -1)));
  mix-blend-mode: var(--mistura, multiply);
  -webkit-mask-image: var(--mascara-gasto);
  mask-image: var(--mascara-gasto);
  -webkit-mask-size: var(--tam-gasto) var(--tam-gasto);
  mask-size: var(--tam-gasto) var(--tam-gasto);
  opacity: .94;
  user-select: none;
}
/* guarda da Spot também no carimbo: letra que ela não tem nem montando, a Sink assume */
.carimbo.com-acento { font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); letter-spacing: var(--ls-etiqueta); }
.carimbo--tinta { --carimbo-cor: var(--tinta); }
.carimbo--ameixa { --carimbo-cor: var(--ameixa); }
.carimbo--duplo { box-shadow: inset 0 0 0 var(--e-1) transparent, inset 0 0 0 calc(var(--e-1) + var(--traco-forte)) var(--carimbo-cor); padding: var(--e-2) var(--e-4); }
.carimbo--redondo {
  display: inline-grid;
  place-items: center;
  width: 8.5em;
  aspect-ratio: 1;
  padding: var(--e-3);
  border-radius: 50%;
  text-align: center;
  font-size: var(--fs-texto-p);
  line-height: 1.05;
}

/* 6.9 Impresso — foto com as quatro bordas rasgadas (e fita por cima) */
.impresso {
  position: relative;
  display: block;
  filter: drop-shadow(0 var(--e-1) var(--e-2) var(--tinta-a24));
}
.impresso > img,
.impresso > .impresso__papel {
  display: block;
  width: 100%;
  background: var(--branco);
  -webkit-mask: var(--mascara-impresso-retrato) center / 100% 100% no-repeat;
  mask: var(--mascara-impresso-retrato) center / 100% 100% no-repeat;
}
.impresso--paisagem > img, .impresso--paisagem > .impresso__papel {
  -webkit-mask-image: var(--mascara-impresso-paisagem);
  mask-image: var(--mascara-impresso-paisagem);
}
.impresso--quadrado > img, .impresso--quadrado > .impresso__papel {
  -webkit-mask-image: var(--mascara-impresso-quadrado);
  mask-image: var(--mascara-impresso-quadrado);
}
.impresso--moldura > img { padding: var(--e-3); }
.impresso figcaption { margin-top: var(--e-2); }

/* 6.10 Retícula ao vivo (CSS puro) — para prévia e peça pequena.
   Peça final: usar a retícula gerada (assets/img/*-reticula.webp). */
.reticula-viva {
  --reticula-ponto: 6px;
  --reticula-giro: 45deg;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--branco);
}
.reticula-viva__foto {
  position: relative;
  filter: contrast(30);
  background: var(--branco-puro);
}
.reticula-viva__foto > img {
  width: 100%;
  filter: var(--filtro-fotocopia);
}
.reticula-viva__foto::after {
  content: "";
  position: absolute;
  inset: -60%;
  background-image: radial-gradient(circle at center, var(--preto-puro) 0, var(--branco-puro) 72%);
  background-size: var(--reticula-ponto) var(--reticula-ponto);
  transform: rotate(var(--reticula-giro));
  mix-blend-mode: color-dodge;
  pointer-events: none;
}
.reticula-viva::before,
.reticula-viva::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
}
.reticula-viva::before { background: var(--tinta); mix-blend-mode: lighten; }
.reticula-viva::after { background: var(--branco); mix-blend-mode: multiply; }

/* 6.11 Letras recortadas (a reviravolta do Reels). O JS divide [data-recortar]
   em letras; cor e giro saem do :nth-child, sem sorteio (sempre igual). */
.recortado { display: inline-flex; flex-wrap: wrap; gap: var(--e-1); }
.recortado > span {
  --letra-fundo: var(--branco);
  display: inline-grid;
  place-items: center;
  min-width: .9em;
  padding: .06em .16em;
  font-family: var(--letra-manchete);
  text-transform: uppercase;
  line-height: 1;
  color: var(--tinta);
  background: var(--letra-fundo);
  box-shadow: var(--sombra-tira-x) var(--sombra-tira-y) 0 var(--tinta-a16);
  transform: rotate(var(--giro-letra, 0deg)) translateY(var(--sobe-letra, 0));
}
.recortado > span:nth-child(5n+1) { --letra-fundo: var(--lilas); --giro-letra: calc(var(--giro-3) * -1); }
.recortado > span:nth-child(5n+2) { --letra-fundo: var(--branco); --giro-letra: var(--giro-2); --sobe-letra: var(--e-1); }
.recortado > span:nth-child(5n+3) { --letra-fundo: var(--menta); --giro-letra: calc(var(--giro-1) * -1); }
.recortado > span:nth-child(5n+4) { --letra-fundo: var(--manteiga); --giro-letra: var(--giro-3); --sobe-letra: calc(var(--e-1) * -1); }
.recortado > span:nth-child(5n+5) { --letra-fundo: var(--rosa); --giro-letra: calc(var(--giro-2) * -1); }
.recortado > span.espaco { background: none; box-shadow: none; min-width: .4em; }
.recortado > span.ponto { --letra-fundo: var(--tomate); }

/* 6.12 Caneta tomate — circular, sublinhar, riscar, apontar.
   Traço duplo de marcador (412.digital): um grosso + um fino deslocado. */
.caneta {
  position: absolute;
  z-index: var(--z-alto);
  overflow: visible;
  pointer-events: none;
  color: var(--tomate);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--traco-caneta);
}
.caneta .fino { stroke-width: calc(var(--traco-caneta) / 2); opacity: .6; }
.caneta path, .caneta ellipse, .caneta line, .caneta polyline {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.caneta--tinta { color: var(--tinta); }
.caneta--ameixa { color: var(--ameixa); }
/* palavra riscada ("a gente não fala") */
.riscado {
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
.riscado::after {
  content: "";
  position: absolute;
  left: -.08em;
  right: -.08em;
  top: 52%;
  height: .14em;
  background: var(--tomate);
  border-radius: var(--raio-adesivo);
  transform: rotate(calc(var(--giro-1) * -1)) scaleX(var(--risco, 1));
  transform-origin: left center;
}

/* 6.13 Explosão (a estrela tomate da direção visual) */
.explosao {
  display: inline-block;
  width: var(--explosao-tam, calc(var(--e-10) + var(--e-3)));
  aspect-ratio: 1;
  color: var(--tomate);
  fill: currentColor;
}

/* 6.14 Marca de registro — .reg-mark (Overprint) */
.reg-mark {
  position: absolute;
  width: var(--e-7);
  height: var(--e-7);
  color: var(--linha-media-cor);
  pointer-events: none;
}

/* 6.15 Cupom — linha de recorte andando + tesoura (shader.se) */
.cupom {
  --cupom-fundo: var(--manteiga);
  --tracejado: var(--e-3);
  position: relative;
  padding: var(--e-5);
  background: var(--textura-fibras), var(--cupom-fundo);
  background-size: var(--tam-fibras) var(--tam-fibras), auto;
  border-radius: var(--raio-etiqueta);
}
.cupom::before {
  content: "";
  position: absolute;
  inset: var(--e-2);
  border-radius: var(--raio-etiqueta);
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--tinta) 50%, transparent 0) top left / var(--tracejado) var(--traco-forte) repeat-x,
    linear-gradient(90deg, var(--tinta) 50%, transparent 0) bottom left / var(--tracejado) var(--traco-forte) repeat-x,
    linear-gradient(0deg, var(--tinta) 50%, transparent 0) top left / var(--traco-forte) var(--tracejado) repeat-y,
    linear-gradient(0deg, var(--tinta) 50%, transparent 0) top right / var(--traco-forte) var(--tracejado) repeat-y;
  animation: recorte-anda var(--t-lento) linear infinite;
}
/* a tesoura fica na quina de cima, na diagonal, cortando o tracejado: nunca em cima do texto */
.cupom__tesoura {
  position: absolute;
  top: calc(var(--e-3) * -1);
  left: calc(var(--e-3) * -1);
  width: var(--e-6);
  transform: rotate(-60deg);
}
.cupom--lilas { --cupom-fundo: var(--lilas); }
.cupom--branco { --cupom-fundo: var(--branco); }

/* 6.16 Marca-texto (Teak) — varre por trás da frase, nunca de uma palavra só no título */
.marca-texto {
  background-image: linear-gradient(transparent 58%, var(--marca-cor, var(--manteiga)) 58% 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: var(--marca, 100%) 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size var(--t-folha) var(--ease-saida);
}
.marca-texto--lilas { --marca-cor: var(--lilas); }
.marca-texto--menta { --marca-cor: var(--menta); }

/* 6.17 Placas fora de registro — .chroma .pc .pm .py .pk (Overprint).
   Mesmo texto em 3 camadas de tinta pastel (multiply) + a tinta por cima.
   Leitor de tela lê uma vez: as placas são aria-hidden e o pai tem aria-label. */
:root {
  --placa-c: var(--menta-3);
  --placa-m: var(--rosa-3);
  --placa-y: var(--manteiga-3);
  --placa-k: var(--tinta);
  --afasta: 0px;
}
.chroma { display: inline-grid; line-height: inherit; }
.chroma > span { grid-area: 1 / 1; display: block; transition: transform var(--t-base) var(--ease-saida); }
.chroma .pc { color: var(--placa-c); mix-blend-mode: multiply; transform: translate(calc(var(--afasta) * -1 - var(--dx, 0px)), calc(var(--afasta) * -.55 - var(--dy, 0px) * .6)); }
.chroma .pm { color: var(--placa-m); mix-blend-mode: multiply; transform: translate(calc(var(--afasta) + var(--dx, 0px)), calc(var(--afasta) * -.35 - var(--dy, 0px) * .4)); }
.chroma .py { color: var(--placa-y); mix-blend-mode: multiply; transform: translate(calc(var(--afasta) * .15 + var(--dx, 0px) * .2), calc(var(--afasta) + var(--dy, 0px))); }
.chroma--viva > span { transition: none; }
.chroma .pk { color: var(--placa-k); position: relative; }
.chroma--registrado { --afasta: 0px; }
.chroma--desencontrado { --afasta: 5px; }
.chroma--fantasma .pk { opacity: .35; }

/* 7. COMPONENTES -------------------------------------------------------------- */
:root {
  --caixa: 22px;          /* checkbox e rádio */
  --chave-l: 52px;        /* interruptor */
  --chave-a: 30px;
  --selo-altura: 28px;
  --contador: 22px;
  --icone-p: 16px;
  --icone: 20px;
  --icone-m: 24px;
  --icone-g: 32px;
  --barra-lateral: 248px;
  --retrato: 40px;
  --retrato-p: 28px;
  --retrato-g: 64px;
  --hamburguer-l: 26px;
  --hamburguer-a: 16px;
}

/* 7.1 BOTÃO — um bloco de carimbo: tem espessura, afunda quando aperta.
   Extrusão em degraus de 1px (Teak) + afundar no :active (Tide).
   Apelidos: .button / .button__inner (Patch). */
.botao, .button {
  --botao-fundo: var(--superficie);
  --botao-texto: var(--texto);
  --botao-borda: var(--linha-forte-cor);
  --extrusao-cor: var(--linha-forte-cor);
  --extrusao: 1px 1px 0 var(--extrusao-cor), 2px 2px 0 var(--extrusao-cor), 3px 3px 0 var(--extrusao-cor);
  --extrusao-alta: 1px 1px 0 var(--extrusao-cor), 2px 2px 0 var(--extrusao-cor), 3px 3px 0 var(--extrusao-cor), 4px 4px 0 var(--extrusao-cor), 5px 5px 0 var(--extrusao-cor);
  --extrusao-baixa: 1px 1px 0 var(--extrusao-cor);
  --botao-altura: var(--alvo);
  --botao-px: var(--e-5);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--botao-altura);
  padding: var(--e-2) var(--botao-px);
  font-family: var(--letra-texto);
  font-weight: var(--peso-semi);
  font-size: var(--fs-texto);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-zero);
  color: var(--botao-texto);
  background-color: var(--botao-fundo);
  border: var(--traco-forte) solid var(--botao-borda);
  border-radius: var(--raio-etiqueta);
  box-shadow: var(--extrusao);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--t-rapido) var(--ease-papel),
    box-shadow var(--t-rapido) var(--ease-papel),
    background-color var(--t-rapido) var(--ease-papel),
    color var(--t-rapido) var(--ease-papel);
}
@media (hover: hover) {
  .botao:hover, .button:hover {
    transform: translate(calc(var(--desloca-duro-alto) * -.4), calc(var(--desloca-duro-alto) * -.4));
    box-shadow: var(--extrusao-alta);
  }
}
.botao:active, .button:active,
.botao.apertado {
  transform: translate(calc(var(--desloca-duro) - var(--desloca-duro-baixo)), calc(var(--desloca-duro) - var(--desloca-duro-baixo)));
  box-shadow: var(--extrusao-baixa);
  transition-duration: var(--t-instante);
}
.botao .icone { width: var(--icone); height: var(--icone); flex: none; }

/* variantes de cor */
.botao--principal {
  --botao-fundo: var(--principal-fundo);
  --botao-texto: var(--principal-texto);
  --botao-borda: var(--principal-fundo);
  --extrusao-cor: var(--tomate);   /* o tempero da tela */
}
.botao--lilas { --botao-fundo: var(--lilas); --botao-texto: var(--tinta); --botao-borda: var(--tinta); --extrusao-cor: var(--tinta); }
.botao--menta { --botao-fundo: var(--menta); --botao-texto: var(--tinta); --botao-borda: var(--tinta); --extrusao-cor: var(--tinta); }
.botao--manteiga { --botao-fundo: var(--manteiga); --botao-texto: var(--tinta); --botao-borda: var(--tinta); --extrusao-cor: var(--tinta); }
.botao--rosa { --botao-fundo: var(--rosa); --botao-texto: var(--tinta); --botao-borda: var(--tinta); --extrusao-cor: var(--tinta); }
@media (hover: hover) {
  .botao--lilas:hover { --botao-fundo: var(--lilas-2); }
  .botao--menta:hover { --botao-fundo: var(--menta-2); }
  .botao--manteiga:hover { --botao-fundo: var(--manteiga-2); }
  .botao--rosa:hover { --botao-fundo: var(--rosa-2); }
}

/* fantasma: sem caixa; o sublinhado tomate entra pela esquerda e sai pela direita (412.digital) */
.botao--fantasma {
  --extrusao: none; --extrusao-alta: none; --extrusao-baixa: none;
  background: transparent;
  border-color: transparent;
  padding-inline: var(--e-2);
}
.botao--fantasma::after {
  content: "";
  position: absolute;
  left: var(--e-2);
  right: var(--e-2);
  bottom: var(--e-2);
  height: var(--traco-forte);
  background: var(--tomate);
  transform: scaleX(0);
  transform-origin: right bottom;
  transition: transform var(--t-base) var(--ease-cortina);
}
@media (hover: hover) {
  .botao--fantasma:hover { transform: none; }
  .botao--fantasma:hover::after { transform: scaleX(1); transform-origin: left bottom; }
}
.botao--fantasma:active { transform: none; }

/* adesivo: pílula de faca com contorno branco; descola no hover */
.botao--adesivo {
  --botao-fundo: var(--lilas);
  --botao-texto: var(--tinta);
  border: 0;
  border-radius: var(--raio-adesivo);
  box-shadow: 0 0 0 var(--e-1) var(--branco), var(--sombra-colada);
}
@media (hover: hover) {
  .botao--adesivo:hover {
    transform: rotate(calc(var(--giro-2) * -1)) translateY(calc(var(--e-0) * -1));
    box-shadow: 0 0 0 var(--e-1) var(--branco), var(--sombra-solta);
  }
}
.botao--adesivo:active { transform: scale(.97); box-shadow: 0 0 0 var(--e-1) var(--branco), var(--sombra-colada); }

/* vira: o texto sai por cima e a cópia entra por baixo (Patch .button__inner) */
.botao--vira { overflow: hidden; }
.botao--vira .botao__texto, .botao--vira .button__inner {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-ficha);
}
.botao--vira .botao__texto + .botao__texto,
.botao--vira .button__inner + .button__inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translateY(110%);
}
@media (hover: hover) {
  .botao--vira:hover .botao__texto:first-child, .botao--vira:hover .button__inner:first-child { transform: translateY(-110%); }
  .botao--vira:hover .botao__texto + .botao__texto, .botao--vira:hover .button__inner + .button__inner { transform: translateY(0); }
}

/* a seta ▶ do Teak: anda para a direita no hover */
.botao__seta {
  width: 0; height: 0;
  border-top: .32em solid transparent;
  border-bottom: .32em solid transparent;
  border-left: .45em solid currentColor;
  transition: transform var(--t-base) var(--ease-mola);
}
@media (hover: hover) { .botao:hover .botao__seta { transform: translateX(var(--e-1)); } }

/* tamanhos */
.botao--p { --botao-altura: 36px; --botao-px: var(--e-4); font-size: var(--fs-texto-p); }
.botao--g { --botao-altura: var(--alvo-g); --botao-px: var(--e-6); font-size: var(--fs-texto-g); }
.botao--icone { --botao-px: 0; width: var(--alvo); padding: 0; }
.botao--icone.botao--p { width: calc(var(--e-6) + var(--e-1)); }
.botao--bloco { display: flex; width: 100%; }

/* desligado: vira molde tracejado, sem espessura */
.botao:disabled, .botao[aria-disabled="true"] {
  --extrusao: none; --extrusao-alta: none; --extrusao-baixa: none;
  color: var(--texto-3);
  background: transparent;
  border-style: dashed;
  border-color: var(--linha-media-cor);
  cursor: not-allowed;
  transform: none;
}
/* carregando: a marca de registro gira (acertando o registro) */
.botao[aria-busy="true"] { pointer-events: none; }
.botao[aria-busy="true"]::before {
  content: "";
  width: var(--icone-p);
  height: var(--icone-p);
  border-radius: 50%;
  border: var(--traco-forte) solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) center / var(--traco-forte) 150% no-repeat,
    linear-gradient(currentColor, currentColor) center / 150% var(--traco-forte) no-repeat;
  animation: girar var(--t-lento) steps(8) infinite;
}

/* grupo de botões */
.botoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }

/* 7.2 CAMPOS ---------------------------------------------------------------- */
.campo { display: grid; gap: var(--e-2); max-width: var(--campo-largura, var(--medida-campo)); }
.campo__rotulo {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  font-weight: var(--peso-semi);
  font-size: var(--fs-rotulo);
  line-height: var(--lh-ui);
  color: var(--texto);
}
.campo__rotulo small { font-weight: var(--peso-normal); color: var(--texto-3); font-size: var(--fs-ajuda); }
.campo__ajuda { font-size: var(--fs-ajuda); line-height: var(--lh-legenda); color: var(--texto-3); }
.campo__erro, .campo__ok {
  display: none;
  align-items: flex-start;
  gap: var(--e-2);
  font-size: var(--fs-ajuda);
  font-weight: var(--peso-semi);
  line-height: var(--lh-legenda);
}
.campo__erro { color: var(--erro-texto); }
.campo__ok { color: var(--ok-texto); }
.campo__erro .icone, .campo__ok .icone { width: var(--icone-p); height: var(--icone-p); flex: none; margin-top: var(--e-0); }

.entrada {
  width: 100%;
  min-height: var(--e-7);
  padding: var(--e-3) var(--e-4);
  font-size: var(--fs-texto);
  line-height: var(--lh-ui);
  color: var(--texto);
  background-color: var(--superficie);
  border: var(--traco) solid var(--linha-media-cor);
  border-radius: var(--raio-etiqueta);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-rapido) var(--ease-papel), box-shadow var(--t-rapido) var(--ease-papel), background-color var(--t-rapido) var(--ease-papel);
}
.entrada::placeholder { color: var(--texto-3); opacity: 1; }
@media (hover: hover) { .entrada:hover:not(:disabled) { border-color: var(--texto-2); } }
.entrada:focus-visible {
  outline: none;
  border-color: var(--linha-forte-cor);
  box-shadow: var(--desloca-duro) var(--desloca-duro) 0 var(--lilas-3);
}
.campo--erro .entrada, .entrada[aria-invalid="true"] {
  border-color: var(--erro-texto);
  background-color: color-mix(in srgb, var(--rosa) 22%, var(--superficie));
}
.campo--erro .entrada:focus-visible, .entrada[aria-invalid="true"]:focus-visible { box-shadow: var(--desloca-duro) var(--desloca-duro) 0 var(--rosa-3); }
.campo--erro .campo__erro, .campo--ok .campo__ok { display: flex; }
.campo--ok .entrada { border-color: var(--ok-texto); }
.entrada:disabled, .entrada[readonly] {
  background-color: var(--fundo-2);
  border-style: dashed;
  color: var(--texto-2);
  cursor: not-allowed;
}
textarea.entrada { min-height: var(--e-10); resize: vertical; line-height: var(--lh-texto); }
.entrada--caderno {
  --pauta: calc(var(--fs-texto) * var(--lh-texto));
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--pauta) - var(--traco-fino)), var(--linha-cor) calc(var(--pauta) - var(--traco-fino)) var(--pauta));
  background-position: 0 calc(var(--e-3) - var(--traco-fino));
  background-attachment: local;
}
select.entrada {
  padding-right: var(--e-8);
  background-image: var(--icone-seta);
  background-repeat: no-repeat;
  background-position: right var(--e-4) center;
  background-size: var(--icone) var(--icone);
}
.entrada--busca {
  padding-left: var(--e-8);
  background-image: var(--icone-lupa);
  background-repeat: no-repeat;
  background-position: left var(--e-4) center;
  background-size: var(--icone) var(--icone);
}
.entrada[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: var(--icone); height: var(--icone); cursor: pointer; background: var(--texto-2); -webkit-mask: var(--mascara-x) center / contain no-repeat; mask: var(--mascara-x) center / contain no-repeat; }
.entrada-grupo { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.entrada-grupo .entrada { flex: 1 1 var(--coluna-p); }

/* escolha: caixa de marcar e rádio */
.escolha {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--e-3);
  min-height: var(--alvo);
  padding-block: var(--e-2);
  cursor: pointer;
  line-height: var(--lh-ui);
}
.escolha input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: var(--caixa);
  height: var(--caixa);
  margin: 0;
  border: var(--traco-forte) solid var(--linha-forte-cor);
  border-radius: var(--e-1);
  background: var(--superficie);
  cursor: pointer;
  transition: background-color var(--t-rapido) var(--ease-papel), transform var(--t-rapido) var(--ease-mola);
}
.escolha input::before {
  content: "";
  width: calc(var(--caixa) * .55);
  height: calc(var(--caixa) * .55);
  background: var(--marcado);
  clip-path: polygon(14% 52%, 0 67%, 38% 100%, 100% 22%, 85% 8%, 37% 70%);
  transform: scale(0);
  transition: transform var(--t-base) var(--ease-mola);
}
.escolha input:checked { background: var(--linha-forte-cor); }
.escolha input:checked::before { transform: scale(1); }
.escolha input[type="radio"] { border-radius: 50%; }
.escolha input[type="radio"]::before { clip-path: circle(50%); width: calc(var(--caixa) * .42); height: calc(var(--caixa) * .42); }
.escolha input:active { transform: scale(.9); }
.escolha input:disabled { border-style: dashed; cursor: not-allowed; }
.escolha input:disabled + span { color: var(--texto-3); }
.escolha__texto small { display: block; color: var(--texto-3); font-size: var(--fs-ajuda); }

/* interruptor: a bolinha é um adesivo que desliza */
.chave {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alvo);
  cursor: pointer;
}
.chave input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: var(--chave-l);
  height: var(--chave-a);
  margin: 0;
  border: var(--traco-forte) solid var(--linha-forte-cor);
  border-radius: var(--raio-adesivo);
  background: var(--superficie-2);   /* desligado é neutro em qualquer folha (no lilás, o fundo-3 parecia ligado) */
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease-papel);
}
.chave input::before {
  content: "";
  position: absolute;
  top: var(--e-0);
  left: var(--e-0);
  width: calc(var(--chave-a) - var(--e-1) - var(--traco-forte) * 2);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--branco);
  border: var(--traco-forte) solid var(--linha-forte-cor);
  transition: transform var(--t-base) var(--ease-mola), background-color var(--t-base) var(--ease-papel);
}
.chave input:checked { background: var(--chave-ligada); }
.chave input:checked::before { transform: translateX(calc(var(--chave-l) - var(--chave-a))); background: var(--manteiga); }
.chave__estado { font-weight: var(--peso-semi); font-size: var(--fs-rotulo); }

/* régua (range) — fio fino e bolinha tomate (Overprint .ctrl input[type=range]) */
.regua { display: grid; gap: var(--e-2); }
.regua input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--alvo);
  background: transparent;
  cursor: pointer;
}
.regua input[type="range"]::-webkit-slider-runnable-track { height: var(--traco-forte); background: var(--linha-forte-cor); border-radius: var(--raio-adesivo); }
.regua input[type="range"]::-moz-range-track { height: var(--traco-forte); background: var(--linha-forte-cor); border-radius: var(--raio-adesivo); }
.regua input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--caixa);
  height: var(--caixa);
  margin-top: calc((var(--caixa) - var(--traco-forte)) / -2);
  border-radius: 50%;
  background: var(--tomate);
  border: var(--e-1) solid var(--fundo);
  box-shadow: 0 0 0 var(--traco-fino) var(--linha-forte-cor);
  transition: transform var(--t-rapido) var(--ease-mola);
}
.regua input[type="range"]::-moz-range-thumb {
  width: var(--caixa);
  height: var(--caixa);
  border-radius: 50%;
  background: var(--tomate);
  border: var(--e-1) solid var(--fundo);
  box-shadow: 0 0 0 var(--traco-fino) var(--linha-forte-cor);
}
.regua input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
.regua__topo { display: flex; justify-content: space-between; font-size: var(--fs-rotulo); font-weight: var(--peso-semi); }
.regua__valor { font-variant-numeric: tabular-nums; color: var(--texto-2); }

/* anexo: área de soltar arquivo com linha de recorte */
.anexo {
  display: grid;
  place-items: center;
  gap: var(--e-2);
  padding: var(--e-6) var(--e-5);
  text-align: center;
  border: var(--traco-forte) dashed var(--linha-media-cor);
  border-radius: var(--raio-etiqueta);
  background: var(--superficie);
  cursor: pointer;
  transition: background-color var(--t-rapido) var(--ease-papel), border-color var(--t-rapido) var(--ease-papel);
}
.anexo:hover, .anexo.arrastando { border-color: var(--linha-forte-cor); background-color: var(--superficie-2); }

/* 7.3 FICHAS E CARTÕES ------------------------------------------------------ */
/* ficha: cartão de arquivo (Patch .block .sectionBlock). Monta em três tempos
   quando ganha .in: topo sobe, ícone entra de lado, corpo sobe. */
.ficha, .block {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  color: var(--texto);
  border: var(--traco) solid var(--linha-forte-cor);
  border-radius: var(--raio-papel);
  overflow: hidden;
}
.ficha__topo, .sectionBlock__top {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: var(--e-8);
  border-bottom: var(--traco) solid var(--linha-forte-cor);
  padding-left: var(--e-4);
}
.ficha__titulo { align-self: center; padding-block: var(--e-2); font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-size: var(--fs-etiqueta); letter-spacing: var(--ls-etiqueta); line-height: var(--lh-ui); }
.ficha__icone, .sectionBlock__icon {
  display: grid;
  place-items: center;
  min-width: var(--e-8);
  border-left: var(--traco) solid var(--linha-forte-cor);
}
.ficha__icone .icone { width: var(--icone-m); height: var(--icone-m); }
.ficha__corpo, .sectionBlock__bottom { padding: var(--e-4) var(--e-4) var(--e-5); display: grid; gap: var(--e-3); align-content: start; flex: 1; }
.ficha__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-3) var(--e-4); border-top: var(--traco) solid var(--linha-cor); }
html.js .ficha.monta .ficha__topo { transform: translateY(101%); }
html.js .ficha.monta .ficha__icone { transform: translateX(-120%); }
html.js .ficha.monta .ficha__corpo { transform: translateY(40%); opacity: 0; }
html.js .ficha.monta.in .ficha__topo { transform: none; transition: transform var(--t-colar) var(--ease-saida); }
html.js .ficha.monta.in .ficha__icone { transform: none; transition: transform var(--t-colar) var(--ease-saida) calc(var(--atraso-passo) * 4); }
html.js .ficha.monta.in .ficha__corpo { transform: none; opacity: 1; transition: transform var(--t-folha) var(--ease-ficha) calc(var(--atraso-passo) * 8), opacity var(--t-base) linear calc(var(--atraso-passo) * 8); }

/* número de canto por contador CSS (Patch .sectionCounter): a diagonal gira na entrada */
.contador-canto, .sectionCounter {
  position: relative;
  flex: none;
  width: var(--e-9);
  height: var(--e-9);
  border: var(--traco) solid var(--linha-forte-cor);
  overflow: hidden;
  counter-increment: secao;
  background: var(--superficie);
}
.contador-canto::after, .sectionCounter::after {
  content: "0" counter(secao);
  position: absolute;
  left: var(--e-2);
  bottom: var(--e-1);
  font-family: var(--letra-numero);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--texto);
}
.contador-canto::before, .sectionCounter::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50%;
  width: 200%;
  border-bottom: var(--traco) solid var(--linha-forte-cor);
  transform: rotate(45deg);
}
html.js .contador-canto:not(.in)::before { transform: rotate(-135deg); }
html.js .contador-canto:not(.in)::after { transform: translateY(120%); }
.contador-canto.in::before { transition: transform var(--t-lento) var(--ease-cortina); }
.contador-canto.in::after { transition: transform var(--t-colar) var(--ease-ficha) calc(var(--atraso-passo) * 3); }
.contagem-secoes { counter-reset: secao; }
.contador-canto[data-numero]::after { content: attr(data-numero); }

/* cartão: pedaço de papel colado. .cartao--solto descola no hover */
.cartao {
  position: relative;
  padding: var(--e-5);
  background: var(--superficie);
  color: var(--texto);
  border-radius: var(--raio-papel);
  box-shadow: var(--sombra-colada);
  transform: rotate(var(--giro, 0deg));
}
.cartao--solto { transition: transform var(--t-base) var(--ease-papel), box-shadow var(--t-base) var(--ease-papel); }
@media (hover: hover) {
  .cartao--solto:hover { transform: rotate(calc(var(--giro, 0deg) - var(--giro-1))) translateY(calc(var(--e-1) * -1)); box-shadow: var(--sombra-solta); }
}
.cartao--linha { box-shadow: none; border: var(--traco) solid var(--linha-cor); }
.cartao--fibras { background: var(--textura-fibras), var(--superficie); background-size: var(--tam-fibras) var(--tam-fibras), auto; }
.cartao__meta { font-size: var(--fs-legenda); color: var(--texto-3); }

/* cartão de número: número verdadeiro, com de onde veio */
.cartao-numero { display: grid; gap: var(--e-2); align-content: start; }
.cartao-numero__valor { font-family: var(--letra-numero); font-weight: var(--peso-normal); font-size: var(--fs-numero); line-height: var(--lh-manchete); letter-spacing: var(--ls-justo); font-variant-numeric: tabular-nums lining-nums; }
.cartao-numero__rotulo { font-weight: var(--peso-semi); line-height: var(--lh-ui); max-width: var(--medida-curta); }
.cartao-numero__fonte { font-size: var(--fs-legenda); color: var(--texto-3); }

/* pilha: fichas que grudam e empilham no scroll (designer-landing .procCard) */
.pilha { display: grid; gap: var(--e-9); padding-bottom: var(--e-9); }
.pilha > .procCard, .pilha > .cartao-pilha {
  position: sticky;
  top: calc(var(--pilha-topo, 14vh) + var(--i, 0) * var(--e-5));
  transform: rotate(var(--giro, 0deg));
  box-shadow: var(--sombra-janela), inset 0 var(--traco-forte) 0 var(--branco-a80);
}

/* chip / atributo (Teak): pastel + borda + ícone */
.chip {
  --chip-fundo: var(--superficie);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--e-6);
  padding: var(--e-1) var(--e-3);
  border: var(--traco-fino) solid var(--linha-media-cor);
  border-radius: var(--raio-adesivo);
  background: var(--chip-fundo);
  color: var(--chip-texto, var(--texto));
  font-size: var(--fs-texto-p);
  font-weight: var(--peso-medio);
  line-height: var(--lh-ui);
  white-space: nowrap;
}
.chip .icone { width: var(--icone-p); height: var(--icone-p); flex: none; }
/* chip colorido é sempre pastel: o texto volta a ser cacau em qualquer folha */
.chip--lilas { --chip-fundo: var(--lilas); --chip-texto: var(--tinta); }
.chip--menta { --chip-fundo: var(--menta); --chip-texto: var(--tinta); }
.chip--rosa { --chip-fundo: var(--rosa); --chip-texto: var(--tinta); }
.chip--manteiga { --chip-fundo: var(--manteiga); --chip-texto: var(--tinta); }
button.chip { cursor: pointer; min-height: var(--alvo); transition: background-color var(--t-rapido) var(--ease-papel), transform var(--t-rapido) var(--ease-mola); }
button.chip:hover { background-color: var(--fundo-2); }
button.chip[aria-pressed="true"] { background: var(--principal-fundo); color: var(--principal-texto); border-color: var(--principal-fundo); }
.chip__tirar { display: grid; place-items: center; width: var(--e-5); height: var(--e-5); margin-right: calc(var(--e-1) * -1); border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.chip__tirar:hover { background: var(--tinta-a12); }

/* 7.4 NAVEGAÇÃO ----------------------------------------------------------- */
/* cabeçalho do site: some ao descer, volta ao subir (412.digital #header) */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecalho);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--e-9);
  padding: var(--e-3) var(--calha);
  transition: transform var(--t-base) var(--ease-papel), background-color var(--t-base) var(--ease-papel), box-shadow var(--t-base) var(--ease-papel);
}
.cabecalho--some { transform: translateY(-110%); }
.cabecalho--solido { background-color: var(--fundo); box-shadow: 0 var(--traco-fino) 0 var(--linha-cor); }
.cabecalho__marca { display: inline-flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--texto); }
.cabecalho__links { display: flex; align-items: center; gap: var(--e-5); list-style: none; margin: 0; padding: 0; }
/* link com sublinhado que entra pela esquerda e sai pela direita */
.link-traco, .cabecalho__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  color: var(--texto);
  font-weight: var(--peso-semi);
  font-size: var(--fs-rotulo);
  text-decoration: none;
}
.link-traco::after, .cabecalho__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--e-2);
  height: var(--traco-forte);
  background: var(--tomate);
  transform: scaleX(0);
  transform-origin: right bottom;
  transition: transform var(--t-base) var(--ease-cortina);
}
.link-traco:hover::after, .cabecalho__links a:hover::after,
.cabecalho__links a[aria-current]::after { transform: scaleX(1); transform-origin: left bottom; }

/* nav com quadradinhos (Teak): o quadrado vira círculo girado no hover */
.nav-quadrados { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); list-style: none; margin: 0; padding: 0; }
.nav-quadrados a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--alvo);
  color: var(--texto);
  text-decoration: none;
  font-weight: var(--peso-semi);
  font-size: var(--fs-rotulo);
}
.nav-quadrados a::before {
  content: "";
  width: var(--e-3);
  height: var(--e-3);
  flex: none;
  background: var(--q, var(--lilas));
  border: var(--traco-fino) solid var(--tinta-a24);
  transition: border-radius var(--t-base) var(--ease-mola), transform var(--t-base) var(--ease-mola);
}
.nav-quadrados a:hover::before, .nav-quadrados a[aria-current]::before { border-radius: 50%; transform: rotate(45deg) scale(1.15); }

/* hambúrguer → X (412.digital #menu-btn) */
.hamburguer, #menu-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--alvo);
  height: var(--alvo);
  border: 0;
  background: transparent;
  color: var(--texto);
}
.hamburguer__linhas { position: relative; width: var(--hamburguer-l); height: var(--hamburguer-a); }
.hamburguer__linha {
  position: absolute;
  right: 0;
  width: 100%;
  height: var(--traco-forte);
  background: currentColor;
  border-radius: var(--raio-adesivo);
  transition: transform var(--t-base) var(--ease-cortina), opacity var(--t-rapido) linear, width var(--t-base) var(--ease-cortina);
}
.hamburguer__linha:nth-child(1) { top: 0; }
.hamburguer__linha:nth-child(2) { top: calc((var(--hamburguer-a) - var(--traco-forte)) / 2); width: 75%; }
.hamburguer__linha:nth-child(3) { top: calc(var(--hamburguer-a) - var(--traco-forte)); }
.hamburguer:hover .hamburguer__linha:nth-child(2) { width: 100%; }
.hamburguer[aria-expanded="true"] .hamburguer__linha:nth-child(1) { transform: translateY(calc((var(--hamburguer-a) - var(--traco-forte)) / 2)) rotate(45deg); }
.hamburguer[aria-expanded="true"] .hamburguer__linha:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] .hamburguer__linha:nth-child(3) { transform: translateY(calc((var(--hamburguer-a) - var(--traco-forte)) / -2)) rotate(-45deg); }

/* menu em tela cheia (412.digital #menu-overlay + .menu-item) */
.menu-cheio {
  position: fixed;
  inset: 0;
  z-index: var(--z-gaveta);
  display: grid;
  align-content: center;
  gap: var(--e-5);
  padding: var(--e-9) var(--calha) var(--e-7);
  background: var(--textura-fibras), var(--lilas);
  background-size: var(--tam-fibras) var(--tam-fibras), auto;
  color: var(--tinta);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease-papel), visibility 0s linear var(--t-base);
}
.menu-cheio.aberto { opacity: 1; visibility: visible; transition: opacity var(--t-base) var(--ease-papel), visibility 0s linear 0s; }
.menu-cheio .menu-item {
  font-family: var(--letra-titulo);
  font-weight: var(--peso-pesado);
  font-size: var(--fs-h2);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-justo);
  color: var(--tinta);
  text-decoration: none;
  width: fit-content;
  transform: translateY(var(--e-6));
  opacity: 0;
  transition: transform var(--t-colar) var(--ease-saida), opacity var(--t-base) linear;
}
.menu-cheio.aberto .menu-item { transform: none; opacity: 1; transition-delay: calc(var(--i, 0) * var(--atraso-passo) + var(--t-rapido)); }

/* barra lateral de sistema (A9 CRM) */
.barra-lateral {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  width: var(--barra-lateral);
  padding: var(--e-4) var(--e-3);
  background: var(--fundo);
  border-right: var(--traco) solid var(--linha-cor);
}
.barra-lateral__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alvo);
  padding: 0 var(--e-3);
  border-radius: var(--raio-etiqueta);
  color: var(--texto-2);
  font-weight: var(--peso-semi);
  font-size: var(--fs-texto-p);
  text-decoration: none;
  transition: background-color var(--t-rapido) var(--ease-papel), color var(--t-rapido) var(--ease-papel);
}
.barra-lateral__item .icone { width: var(--icone); height: var(--icone); flex: none; }
.barra-lateral__item:hover { background: var(--fundo-2); color: var(--texto); }
.barra-lateral__item[aria-current] { color: var(--tinta); background: var(--manteiga); box-shadow: var(--sombra-colada); }
.barra-lateral__item[aria-current]::before {
  content: "";
  position: absolute;
  left: calc(var(--e-2) * -1);
  top: 50%;
  width: var(--e-1);
  height: 60%;
  border-radius: var(--raio-adesivo);
  background: var(--tomate);
  transform: translateY(-50%);
}
.barra-lateral__grupo { margin: var(--e-4) var(--e-3) var(--e-1); font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-size: var(--fs-texto-p); color: var(--texto-3); }

/* barra de abas no pé (app no celular) */
.barra-abas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-2) calc(var(--e-2) + env(safe-area-inset-bottom, 0px));
  background: var(--superficie);
  border-top: var(--traco) solid var(--linha-cor);
}
.barra-abas__item {
  display: grid;
  justify-items: center;
  gap: var(--e-1);
  min-height: var(--alvo-g);
  padding: var(--e-1) 0;
  color: var(--texto-2);
  font-size: var(--fs-mini);
  font-weight: var(--peso-semi);
  text-decoration: none;
  border-radius: var(--raio-etiqueta);
}
.barra-abas__item .icone { width: var(--icone-m); height: var(--icone-m); padding: var(--e-1); box-sizing: content-box; border-radius: var(--raio-adesivo); transition: background-color var(--t-base) var(--ease-mola), padding var(--t-base) var(--ease-mola); }
.barra-abas__item[aria-current] { color: var(--texto); }
.barra-abas__item[aria-current] .icone { color: var(--tinta); }
.barra-abas__item[aria-current] .icone { background: var(--lilas); padding-inline: var(--e-4); }

/* caminho (breadcrumb) */
.caminho ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); list-style: none; margin: 0; padding: 0; font-size: var(--fs-texto-p); }
.caminho li + li::before { content: "/"; margin-right: var(--e-2); color: var(--texto-3); }
.caminho a { color: var(--texto-2); }
.caminho [aria-current] { font-weight: var(--peso-semi); }

/* abas: orelhas de pasta de arquivo */
.abas__lista { display: flex; gap: var(--e-1); padding: 0 var(--e-3); overflow-x: auto; scrollbar-width: none; }
.abas__lista::-webkit-scrollbar { display: none; }
.abas__aba {
  position: relative;
  flex: none;
  min-height: var(--alvo);
  padding: var(--e-2) var(--e-5) var(--e-3);
  border: var(--traco) solid var(--linha-forte-cor);
  border-bottom: 0;
  border-radius: var(--raio-janela) var(--raio-janela) 0 0;
  background: var(--fundo-2);
  color: var(--texto-2);
  font-weight: var(--peso-semi);
  font-size: var(--fs-rotulo);
  transform: translateY(var(--e-1));
  transition: transform var(--t-base) var(--ease-mola), background-color var(--t-rapido) var(--ease-papel);
}
.abas__aba:hover { transform: translateY(var(--e-0)); }
.abas__aba[aria-selected="true"] { background: var(--superficie); color: var(--texto); transform: translateY(var(--traco)); z-index: var(--z-base); }
.abas__painel {
  padding: var(--e-5);
  border: var(--traco) solid var(--linha-forte-cor);
  border-radius: var(--raio-papel);
  background: var(--superficie);
}
.abas__painel[hidden] { display: none; }

/* 7.5 SEÇÃO: a folha rasgada -------------------------------------------------- */
.folha {
  position: relative;
  padding-block: var(--secao-y);
  background-image: var(--textura-fibras);
  background-size: var(--tam-fibras) var(--tam-fibras);
  color: var(--texto);
}
.folha__rasgo {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--traco-forte));
  width: max(100%, var(--largura));
  height: var(--e-7);
  color: var(--fundo);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: var(--z-base);
}
/* folha quadriculada: grade da folha por cima da fibra (a .folha sozinha apagaria a grade) */
.folha:is(.caderno, .grid-bg, .bg-grid) {
  background-image: var(--grade), var(--textura-fibras);
  background-size: var(--tam-grade) var(--tam-grade), var(--tam-fibras) var(--tam-fibras);
  background-position: calc(var(--tam-grade) / -2) calc(var(--tam-grade) / -2), 0 0;
}
/* o corpo da borda rasgada é pintado com o fundo da própria folha (cor, fibra e grade), então o
   quadriculado continua até a borda. O SVG fica só com a fibra branca e a sombra. A caixa começa
   um múltiplo da grade acima da folha para os quadradinhos casarem. */
.folha:has(> .folha__rasgo) > .folha__rasgo { --rasgo-corpo: transparent; }
.folha:has(> .folha__rasgo)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - var(--traco-forte));
  height: calc(var(--tam-grade) + var(--traco-forte));
  z-index: calc(var(--z-base) + 1);
  background: inherit;
  pointer-events: none;
  -webkit-mask: var(--rasgo-mascara, var(--mascara-rasgo-a)) center bottom / max(100%, var(--largura)) var(--e-7) no-repeat;
  mask: var(--rasgo-mascara, var(--mascara-rasgo-a)) center bottom / max(100%, var(--largura)) var(--e-7) no-repeat;
}
.folha:has(> .folha__rasgo use[href="#rasgo-b"]) { --rasgo-mascara: var(--mascara-rasgo-b); }
.folha:has(> .folha__rasgo use[href="#rasgo-c"]) { --rasgo-mascara: var(--mascara-rasgo-c); }
.folha__miolo { position: relative; z-index: var(--z-colagem); width: min(100% - var(--calha) * 2, var(--largura)); margin-inline: auto; }
.folha__cabeca { display: grid; gap: var(--e-4); margin-bottom: var(--e-8); max-width: var(--largura-texto); }
.folha__cabeca p { font-size: var(--fs-texto-g); color: var(--texto-2); }

/* 7.6 JANELA (diálogo) — janela de sistema antigo em papel ---------------------- */
.janela {
  width: min(var(--largura-janela), 100vw - var(--calha) * 2);
  max-height: min(86vh, var(--altura-janela));
  padding: 0;
  border: var(--traco-forte) solid var(--tinta);
  border-radius: var(--raio-janela);
  background: var(--branco);
  color: var(--tinta);
  box-shadow: var(--sombra-janela), var(--desloca-duro-alto) var(--desloca-duro-alto) 0 var(--tinta);
  overflow: hidden;
}
.janela[open] { display: flex; flex-direction: column; animation: colar var(--t-colar) steps(1, end) both; }
.janela.fechando { animation: descolar var(--t-base) var(--ease-papel) both; }
.janela::backdrop { background: rgb(var(--tinta-rgb) / .55); }
.janela__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-1) var(--e-1) var(--e-1) var(--e-4);
  background: var(--manteiga);
  border-bottom: var(--traco-forte) solid var(--tinta);
}
.janela__titulo { font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-size: var(--fs-etiqueta); font-weight: var(--peso-normal); letter-spacing: var(--ls-etiqueta); }
.janela__fechar {
  display: grid;
  place-items: center;
  width: var(--alvo);
  height: var(--alvo);
  border: var(--traco-forte) solid var(--tinta);
  border-radius: var(--raio-etiqueta);
  background: var(--branco);
  color: var(--tinta);
  transition: background-color var(--t-rapido) var(--ease-papel), transform var(--t-rapido) var(--ease-mola);
}
.janela__fechar:hover { background: var(--rosa); transform: rotate(calc(var(--giro-3) * -1)); }
.janela__fechar .icone { width: var(--icone); height: var(--icone); }
.janela__corpo { padding: var(--e-5); overflow: auto; display: grid; gap: var(--e-3); }
.janela__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-3); padding: var(--e-4) var(--e-5) var(--e-5); border-top: var(--traco) solid var(--linha-cor); }

/* gaveta: folha que sobe do pé da tela (celular) */
.gaveta {
  width: 100%;
  max-width: var(--largura-gaveta);
  max-height: 88vh;
  margin: auto auto 0;
  padding: 0;
  border: var(--traco-forte) solid var(--tinta);
  border-bottom: 0;
  border-radius: var(--raio-janela) var(--raio-janela) 0 0;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra-janela);
}
.gaveta[open] { display: flex; flex-direction: column; animation: gaveta-sobe var(--t-colar) var(--ease-saida) both; }
.gaveta.fechando { animation: gaveta-desce var(--t-base) var(--ease-papel) both; }
.gaveta::backdrop { background: rgb(var(--tinta-rgb) / .5); }
.gaveta__alca { width: var(--e-8); height: var(--e-1); margin: var(--e-3) auto var(--e-1); border-radius: var(--raio-adesivo); background: var(--tinta-a40); }
.gaveta__corpo { padding: var(--e-3) var(--e-5) calc(var(--e-6) + env(safe-area-inset-bottom, 0px)); overflow: auto; }

/* 7.7 SELOS E CONTADORES -------------------------------------------------------- */
.selo {
  --selo-fundo: var(--superficie);
  --selo-ponto: var(--tinta);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--selo-altura);
  padding: 0 var(--e-3);
  border: var(--traco) solid var(--tinta);
  border-radius: var(--raio-adesivo);
  background: var(--selo-fundo);
  color: var(--tinta);
  font-family: var(--letra-texto);
  font-size: var(--fs-legenda);
  font-weight: var(--peso-semi);
  line-height: var(--lh-ui);
  white-space: nowrap;
}
.selo__ponto { width: var(--e-2); height: var(--e-2); flex: none; border-radius: 50%; background: var(--selo-ponto); }
.selo--feito { --selo-fundo: var(--menta); --selo-ponto: var(--menta-tinta); }
.selo--fazendo { --selo-fundo: var(--lilas); --selo-ponto: var(--tinta); }
.selo--fazendo .selo__ponto, .node-active { animation: pulse-ring var(--t-pulso) ease-out infinite; }
.selo--esperando { --selo-fundo: var(--manteiga); --selo-ponto: var(--manteiga-tinta); }
.selo--planejado { --selo-fundo: transparent; --selo-ponto: var(--linha-media-cor); border-style: dashed; border-color: var(--linha-forte-cor); color: var(--texto); }
.selo--atrasado { --selo-fundo: var(--rosa); --selo-ponto: var(--tomate-tinta); }
.contador {
  display: inline-grid;
  place-items: center;
  min-width: var(--contador);
  height: var(--contador);
  padding: 0 var(--e-1);
  border-radius: var(--raio-adesivo);
  background: var(--tomate);
  color: var(--tinta);       /* tinta sobre tomate: 4,6:1 (papel sobre tomate reprova) */
  font-size: var(--fs-mini);
  font-weight: var(--peso-forte);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 var(--traco-forte) var(--fundo);
}

/* 7.8 BILHETE (dica / tooltip) — um papelzinho que cola perto de quem pediu --- */
.com-bilhete { position: relative; display: inline-flex; }
.bilhete {
  position: absolute;
  bottom: calc(100% + var(--e-3));
  left: 50%;
  z-index: var(--z-gaveta);
  width: max-content;
  max-width: min(var(--coluna), 72vw);
  padding: var(--e-2) var(--e-3);
  background: var(--manteiga);
  color: var(--tinta);
  font-size: var(--fs-texto-p);
  font-weight: var(--peso-medio);
  line-height: var(--lh-legenda);
  text-align: left;
  white-space: normal;
  border-radius: var(--raio-papel);
  box-shadow: var(--sombra-solta);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, var(--e-2)) rotate(calc(var(--giro-1) * -1)) scale(.96);
  transform-origin: 50% 100%;
  transition: opacity var(--t-rapido) linear, transform var(--t-base) var(--ease-mola), visibility 0s linear var(--t-base);
}
.bilhete::before { /* ponte invisível: dá para levar o mouse até o bilhete (WCAG 1.4.13) */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: var(--e-3);
}
.bilhete::after {
  content: "";
  position: absolute;
  top: calc(100% - var(--traco-fino));
  left: 50%;
  width: var(--e-4);
  height: var(--e-2);
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 46% 100%);
  transform: translateX(-50%);
}
.com-bilhete:hover .bilhete,
.com-bilhete:focus-within .bilhete,
.com-bilhete.aberto .bilhete {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) rotate(calc(var(--giro-1) * -1));
  transition: opacity var(--t-rapido) linear, transform var(--t-base) var(--ease-mola), visibility 0s linear 0s;
}
.com-bilhete.dispensado .bilhete { opacity: 0; visibility: hidden; }
.bilhete--baixo { bottom: auto; top: calc(100% + var(--e-3)); transform-origin: 50% 0; }
.bilhete--baixo::before { top: auto; bottom: 100%; }
.bilhete--baixo::after { top: auto; bottom: calc(100% - var(--traco-fino)); clip-path: polygon(54% 0, 100% 100%, 0 100%); }
.bilhete--branco { background: var(--branco); }
.bilhete--tinta { background: var(--tinta); color: var(--papel); }
.bilhete__dona { display: flex; gap: var(--e-2); align-items: flex-start; }
.bilhete__dona img { width: var(--e-6); flex: none; }

/* 7.9 RECADO (aviso rápido / toast) ------------------------------------------ */
.recados {
  position: fixed;
  left: 50%;
  bottom: calc(var(--e-5) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-recado);
  display: grid;
  gap: var(--e-2);
  width: min(var(--largura-recado), 100vw - var(--calha) * 2);
  transform: translateX(-50%);
  pointer-events: none;
}
.recado {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alvo-g);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--raio-etiqueta);
  box-shadow: var(--sombra-janela);
  font-weight: var(--peso-medio);
  animation: colar var(--t-colar) steps(1, end) both;
}
.recado.saindo { animation: descolar var(--t-base) var(--ease-papel) both; }
.recado__icone { width: var(--icone); height: var(--icone); flex: none; color: var(--manteiga); }
.recado--sucesso .recado__icone { color: var(--menta); }
.recado--erro .recado__icone { color: var(--rosa); }
.recado__texto { flex: 1; line-height: var(--lh-ui); }
.recado__acao {
  min-height: var(--alvo);
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--raio-etiqueta);
  background: transparent;
  color: var(--manteiga);
  font-weight: var(--peso-forte);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.recado__acao:hover { background: var(--tinta-sup); }

/* 7.10 SANFONA (acordeão, Patch .accordion) --------------------------------- */
.sanfona, .accordion { border-top: var(--traco) solid var(--linha-forte-cor); }
.sanfona__item { border-bottom: var(--traco) solid var(--linha-forte-cor); }
.sanfona__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--alvo-g);
  padding: var(--e-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--letra-titulo);
  font-weight: var(--peso-forte);
  font-size: var(--fs-h5);
  line-height: var(--lh-ui);
}
.sanfona__item > summary::-webkit-details-marker { display: none; }
.sanfona__sinal {
  position: relative;
  flex: none;
  width: var(--alvo);
  height: var(--alvo);
  border: var(--traco-forte) solid var(--linha-forte-cor);
  border-radius: 50%;
  transition: transform var(--t-base) var(--ease-mola), background-color var(--t-rapido) var(--ease-papel);
}
.sanfona__sinal::before, .sanfona__sinal::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 40%;
  height: var(--traco-forte);
  background: currentColor;
  transform: translate(-50%, -50%);
}
.sanfona__sinal::after { transform: translate(-50%, -50%) rotate(90deg); }
.sanfona__item[open] .sanfona__sinal { transform: rotate(45deg); background: var(--manteiga); color: var(--tinta); }
.sanfona__item > summary:hover .sanfona__sinal { background: var(--fundo-2); }
.sanfona__conteudo { padding: 0 var(--e-8) var(--e-5) 0; color: var(--texto-2); }
.sanfona__item::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-base) var(--ease-ficha), content-visibility var(--t-base) allow-discrete; }
.sanfona__item[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { .sanfona, .accordion { interpolate-size: allow-keywords; } }

/* 7.11 PROGRESSO E CARREGANDO ------------------------------------------------- */
.progresso {
  --progresso: 0%;
  position: relative;
  height: var(--e-3);
  border: var(--traco) solid var(--linha-forte-cor);
  border-radius: var(--raio-adesivo);
  background: var(--superficie);
  overflow: hidden;
}
.progresso::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progresso);
  background: repeating-linear-gradient(-45deg, var(--lilas) 0 var(--e-2), var(--lilas-2) var(--e-2) var(--e-4));
  border-right: var(--traco) solid var(--linha-forte-cor);
  transition: width var(--t-folha) var(--ease-saida);
}
/* barra em blocos, como a tela de boot do shader.se (21 blocos) */
.progresso-blocos {
  --blocos: 21;
  --feitos: 0;
  display: grid;
  grid-template-columns: repeat(var(--blocos), 1fr);
  gap: var(--e-1);
  padding: var(--e-1);
  border: var(--traco-forte) solid var(--linha-forte-cor);
}
.progresso-blocos > i { display: block; height: var(--e-3); background: var(--fundo-2); }
.progresso-blocos > i.feito { background: var(--linha-forte-cor); }
/* carregando: três barras de placa (Overprint .veil + @keyframes load) */
.carregando { display: inline-grid; gap: var(--e-1); width: var(--e-9); }
.carregando > i {
  display: block;
  height: var(--e-1);
  border-radius: var(--raio-adesivo);
  background: var(--lilas-3);
  transform: scaleX(.2);
  transform-origin: left;
  animation: load var(--t-carregando) var(--ease-saida) infinite alternate;
}
.carregando > i:nth-child(2) { background: var(--menta-3); animation-delay: var(--atraso-carregando); }
.carregando > i:nth-child(3) { background: var(--rosa-3); animation-delay: calc(var(--atraso-carregando) * 2); }

/* 7.12 RETRATO (avatar) --------------------------------------------------------- */
.retrato {
  --retrato-tam: var(--retrato);
  display: inline-grid;
  place-items: center;
  width: var(--retrato-tam);
  aspect-ratio: 1;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--retrato-fundo, var(--lilas));
  color: var(--tinta);
  font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta);
  font-size: calc(var(--retrato-tam) * .42);
  line-height: 1;
  box-shadow: 0 0 0 var(--traco-forte) var(--branco), 0 0 0 calc(var(--traco-forte) * 2) var(--linha-cor);
}
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.retrato--p { --retrato-tam: var(--retrato-p); }
.retrato--g { --retrato-tam: var(--retrato-g); }
.retratos { display: flex; }
.retratos .retrato + .retrato { margin-left: calc(var(--retrato-tam) * -.28); }

/* 7.13 ESQUELETO (carregando conteúdo) ----------------------------------------- */
.esqueleto {
  display: block;
  min-height: 1em;
  border-radius: var(--raio-papel);
  background:
    linear-gradient(100deg, transparent 30%, var(--branco-a80) 50%, transparent 70%) 0 0 / 250% 100% no-repeat,
    var(--fundo-2);
  animation: brilho-papel var(--t-pulso) var(--ease-papel) infinite;
}
.esqueleto--linha { height: .9em; margin-bottom: var(--e-2); }
.esqueleto--linha:last-child { width: 62%; }
.esqueleto--bloco { height: var(--e-10); }
.esqueleto--retrato { width: var(--retrato); height: var(--retrato); border-radius: 50%; }

/* 7.14 ESTADO (vazio, erro, carregando) com os dois humores da Dona Alma ---------- */
.estado {
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  max-width: var(--medida-curta);
  margin-inline: auto;
  padding: var(--e-7) var(--e-5);
  text-align: center;
}
.estado__mascote { width: min(calc(var(--e-10) + var(--e-5)), 42vw); }
.estado__titulo { font-family: var(--letra-titulo); font-weight: var(--peso-forte); font-size: var(--fs-h4); line-height: var(--lh-titulo-2); }
.estado__texto { color: var(--texto-2); }
.estado .botoes { justify-content: center; margin-top: var(--e-2); }

/* 7.15 TABELA ------------------------------------------------------------------- */
.tabela-rolagem { overflow-x: auto; border: var(--traco) solid var(--linha-forte-cor); border-radius: var(--raio-papel); background: var(--superficie); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-texto-p); }
.tabela caption { text-align: left; padding: var(--e-3) var(--e-4); font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-size: var(--fs-etiqueta); }
.tabela th, .tabela td { padding: var(--e-3) var(--e-4); text-align: left; vertical-align: middle; border-bottom: var(--traco-fino) solid var(--linha-cor); }
.tabela thead th { font-size: var(--fs-legenda); font-weight: var(--peso-semi); color: var(--texto-2); background: var(--fundo-2); white-space: nowrap; }
.tabela tbody tr { transition: background-color var(--t-rapido) var(--ease-papel); }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela tbody tr:last-child td { border-bottom: 0; }
@media screen and (max-width: 640px) {
  .tabela--cartoes thead { display: none; }
  .tabela--cartoes tr { display: grid; gap: var(--e-1); padding: var(--e-3) var(--e-4); border-bottom: var(--traco-fino) solid var(--linha-cor); }
  .tabela--cartoes td { display: flex; justify-content: space-between; gap: var(--e-4); padding: 0; border: 0; }
  .tabela--cartoes td::before { content: attr(data-rotulo); font-weight: var(--peso-semi); color: var(--texto-2); }
  .tabela--cartoes .num { text-align: right; }
}

/* 7.16 LETREIRO (marquee) — apelidos: .marquee .track (Overprint), .marquee-track (Tide),
   .rollingBanner .rollingBanner__rail (Patch), .studioMarquee (designer-landing) */
.letreiro, .marquee, .rollingBanner {
  --letreiro-fundo: var(--kraft);
  position: relative;
  overflow: hidden;
  padding-block: var(--e-4);
  background: var(--textura-kraft), var(--letreiro-fundo);
  background-size: var(--tam-kraft) var(--tam-kraft), auto;
  color: var(--tinta);
  border-block: var(--traco) solid var(--tinta-a24);
}
.letreiro__trilho, .marquee .track, .marquee-track, .rollingBanner__rail, .studioMarquee {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: marquee var(--t-letreiro) linear infinite;
}
.letreiro--volta .letreiro__trilho { animation-direction: reverse; }
@media (hover: hover) { .letreiro:hover .letreiro__trilho, .marquee-track:hover { animation-play-state: paused; } }
.letreiro .item, .marquee .item {
  display: inline-flex;
  align-items: center;
  gap: var(--e-5);
  padding-inline: var(--e-5);
  font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta);
  font-size: var(--fs-h4);
  line-height: 1;
  letter-spacing: var(--ls-etiqueta);
}
.letreiro .item--contorno { font-family: var(--letra-manchete-contorno); text-transform: uppercase; }
.letreiro .sep, .marquee .sep { width: var(--e-3); height: var(--e-3); flex: none; border-radius: 50%; background: var(--lilas); border: var(--traco) solid var(--tinta); }
.letreiro .item:nth-child(3n+2) .sep { background: var(--menta); }
.letreiro .item:nth-child(3n) .sep { background: var(--tomate); }
.letreiro--tinta { --letreiro-fundo: var(--tinta); background: var(--tinta); color: var(--papel); }
.letreiro--lilas { --letreiro-fundo: var(--lilas); background: var(--textura-fibras), var(--lilas); }

/* 7.17 CARROSSEL (arrastar no celular, setas no computador) --------------------- */
.carrossel { position: relative; display: grid; gap: var(--e-4); }
.carrossel__trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--carrossel-slide, min(78%, var(--largura-celular)));
  gap: var(--e-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--e-1);
  padding: var(--e-2) var(--e-1) var(--e-4);
  scrollbar-width: thin;
  scrollbar-color: var(--linha-media-cor) transparent;
}
.carrossel__slide { scroll-snap-align: start; }
.carrossel__controles { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.carrossel__pontos { display: flex; gap: var(--e-2); }
.carrossel__pontos button {
  width: var(--e-3);
  height: var(--e-3);
  padding: 0;
  border: var(--traco) solid var(--linha-forte-cor);
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--t-rapido) var(--ease-papel), width var(--t-base) var(--ease-mola);
}
.carrossel__pontos button[aria-current="true"] { width: var(--e-6); border-radius: var(--raio-adesivo); background: var(--linha-forte-cor); }
.carrossel__pontos button::before { content: ""; display: block; margin: calc((var(--alvo) - var(--e-3)) / -2); height: var(--alvo); }

/* 7.18 JANELA DE SISTEMA (ficha técnica, Tide terminal) ------------------------ */
.janela-sistema {
  border: var(--traco-forte) solid var(--linha-forte-cor);
  border-radius: var(--raio-etiqueta);
  background: var(--superficie);
  box-shadow: var(--desloca-duro-alto) var(--desloca-duro-alto) 0 var(--linha-forte-cor);
  overflow: hidden;
}
.janela-sistema__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-4);
  --texto: var(--tinta);
  --texto-2: var(--tinta-2);
  --linha-media-cor: var(--tinta-a40);
  --linha-forte-cor: var(--tinta);
  background: var(--manteiga);
  color: var(--tinta);
  border-bottom: var(--traco-forte) solid var(--linha-forte-cor);
  font-size: var(--fs-legenda);
  font-weight: var(--peso-semi);
}
.janela-sistema__bolinhas { display: flex; gap: var(--e-1); }
.janela-sistema__bolinhas i { width: calc(var(--e-2) + var(--e-0)); height: calc(var(--e-2) + var(--e-0)); border-radius: 50%; border: var(--traco-fino) solid var(--tinta); background: var(--lilas); }
.janela-sistema__bolinhas i:nth-child(2) { background: var(--menta); }
.janela-sistema__bolinhas i:nth-child(3) { background: var(--rosa); }
.janela-sistema__linha { display: grid; grid-template-columns: minmax(calc(var(--e-10) + var(--e-4)), var(--e-11)) 1fr; gap: var(--e-2) var(--e-5); padding: var(--e-4); border-top: var(--traco-fino) solid var(--linha-cor); transition: background-color var(--t-rapido) var(--ease-papel); }
.janela-sistema__linha:first-of-type { border-top: 0; }
.janela-sistema__linha:hover { background: var(--superficie-2); }
.janela-sistema__chave { font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-size: var(--fs-texto-p); letter-spacing: var(--ls-etiqueta); }
@media screen and (max-width: 640px) { .janela-sistema__linha { grid-template-columns: 1fr; } }

/* 7.19 LINHA DO TEMPO (Tide timeline + selos de status) ------------------------ */
.linha-tempo { position: relative; display: grid; gap: var(--e-5); padding-left: var(--e-7); list-style: none; margin: 0; }
.linha-tempo::before { content: ""; position: absolute; left: calc(var(--e-3) - var(--traco-fino)); top: var(--e-2); bottom: var(--e-2); width: var(--traco-forte); background: repeating-linear-gradient(var(--linha-forte-cor) 0 var(--e-2), transparent var(--e-2) var(--e-3)); }
.linha-tempo__item { position: relative; display: grid; gap: var(--e-1); }
.linha-tempo__marca {
  position: absolute;
  left: calc(var(--e-7) * -1 + var(--e-1));
  top: var(--e-1);
  width: var(--e-4);
  height: var(--e-4);
  border: var(--traco-forte) solid var(--linha-forte-cor);
  background: var(--superficie);
  transform: rotate(45deg);
}
.linha-tempo__item--feito .linha-tempo__marca { background: var(--menta); }
.linha-tempo__item--fazendo .linha-tempo__marca { background: var(--lilas); animation: pulse-ring var(--t-pulso) ease-out infinite; }
.linha-tempo__quando { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); font-weight: var(--peso-semi); font-size: var(--fs-rotulo); }

/* 7.20 PIPELINE COM SINAL (Tide .signal-dot + .node-active) --------------------- */
.pipeline { position: relative; }
.pipeline__linha { position: absolute; top: calc(var(--e-8) / 2); left: var(--e-6); right: var(--e-6); height: var(--traco-forte); background: var(--linha-forte-cor); }
.signal-dot, .pipeline__sinal {
  position: absolute;
  top: 50%;
  width: var(--e-3);
  height: var(--e-3);
  border-radius: 50%;
  background: var(--tomate);
  border: var(--traco-forte) solid var(--linha-forte-cor);
  transform: translate(-50%, -50%);
  animation: signal var(--t-sinal) linear infinite;
}
.pipeline__nos { position: relative; display: grid; grid-template-columns: repeat(var(--nos, 6), 1fr); gap: var(--e-3); list-style: none; margin: 0; padding: 0; }
.pipeline__no { display: grid; justify-items: center; gap: var(--e-2); text-align: center; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.pipeline__caixa {
  display: grid;
  place-items: center;
  width: var(--e-8);
  height: var(--e-8);
  border: var(--traco-forte) solid var(--linha-forte-cor);
  border-radius: var(--raio-etiqueta);
  background: var(--superficie);
  transition: background-color var(--t-base) var(--ease-papel), transform var(--t-base) var(--ease-mola);
}
.pipeline__caixa .icone { width: var(--icone-g); height: var(--icone-g); }
.pipeline__no:hover .pipeline__caixa, .pipeline__no[aria-pressed="true"] .pipeline__caixa { background: var(--lilas); transform: translateY(calc(var(--e-1) * -1)); }
.pipeline__no--gargalo .pipeline__caixa { background: var(--rosa); }
.pipeline__nome { font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-size: var(--fs-texto-p); line-height: var(--lh-ui); }
.pipeline__etapa { font-size: var(--fs-mini); color: var(--texto-3); }
@media screen and (max-width: 760px) {
  .pipeline__linha { display: none; }
  .pipeline__nos { grid-template-columns: 1fr; }
  .pipeline__no { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: var(--e-4); }
  .pipeline__no .pipeline__caixa { grid-row: span 2; }
}

/* 7.21 CONTAGEM (regressiva e de números) ------------------------------------- */
.contagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-2); }
.contagem__caixa {
  display: grid;
  justify-items: center;
  gap: var(--e-1);
  padding: var(--e-3) var(--e-1);
  border: var(--traco-forte) solid var(--linha-forte-cor);
  border-radius: var(--raio-etiqueta);
  background: var(--superficie);
  box-shadow: var(--desloca-duro) var(--desloca-duro) 0 var(--linha-forte-cor);
}
.contagem__numero { font-family: var(--letra-numero); font-weight: var(--peso-normal); font-size: var(--fs-h3); line-height: 1; font-variant-numeric: tabular-nums; }
.contagem__rotulo { font-size: var(--fs-mini); font-weight: var(--peso-semi); color: var(--texto-2); }

/* 7.22 BALÃO DE CONVERSA (o WhatsApp da Dona Alma) ------------------------------ */
.conversa { display: grid; gap: var(--e-2); }
.balao {
  position: relative;
  max-width: min(84%, var(--largura-celular));
  padding: var(--e-2) var(--e-3) var(--e-2);
  border-radius: var(--raio-janela);
  background: var(--superficie);
  color: var(--tinta);
  font-size: var(--fs-texto-p);
  line-height: var(--lh-legenda);
  box-shadow: var(--sombra-colada);
}
.balao--dela { justify-self: start; border-top-left-radius: var(--raio-papel); background: var(--branco); }
.balao--cliente { justify-self: end; border-top-right-radius: var(--raio-papel); background: var(--menta); }
.balao__hora { display: block; margin-top: var(--e-1); font-size: var(--fs-mini); color: var(--tinta-3); text-align: right; }
.balao__quem { display: block; font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-size: var(--fs-rotulo); color: var(--ameixa); }
.caret {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: var(--e-0);
  vertical-align: text-bottom;
  background: var(--tinta);
  animation: blink var(--t-cursor) steps(1) infinite;
}

/* 7.23 ETIQUETA DE ETAPA (o 3A3R dentro do sistema) ------------------------------
   Quadradinho da cor da etapa + a frase da casa. A cor vem de --etapa-*. */
.etapa-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  max-width: 100%;
  font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta);
  font-size: var(--fs-rotulo);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-etiqueta);
  color: var(--texto);
}
.etapa-tag::before {
  content: "";
  flex: none;
  width: var(--e-3);
  height: var(--e-3);
  border: var(--traco-fino) solid var(--linha-forte-cor);
  border-radius: var(--raio-papel);
  background: var(--etapa-cor, var(--lilas));
}

/* 7.24 COMANDA (os números do dia) — um cupom de balcão, com o pé serrilhado ------ */
.comanda {
  --serra: var(--e-2);
  position: relative;
  padding: var(--e-4) var(--e-5) calc(var(--e-5) + var(--serra));
  background-color: var(--superficie);
  background-image: var(--textura-fibras);
  background-size: var(--tam-fibras) var(--tam-fibras);
  color: var(--texto);
  filter: drop-shadow(0 var(--e-1) var(--e-2) var(--sombra-cor));
  -webkit-mask: linear-gradient(var(--preto-puro) 0 0) top / 100% calc(100% - var(--serra)) no-repeat, conic-gradient(from -45deg at bottom, transparent, var(--preto-puro) 1deg 89deg, transparent 90deg) bottom / calc(var(--serra) * 2) var(--serra) repeat-x;
  mask: linear-gradient(var(--preto-puro) 0 0) top / 100% calc(100% - var(--serra)) no-repeat, conic-gradient(from -45deg at bottom, transparent, var(--preto-puro) 1deg 89deg, transparent 90deg) bottom / calc(var(--serra) * 2) var(--serra) repeat-x;
}
.comanda__titulo { max-width: none; padding-bottom: var(--e-3); margin-bottom: var(--e-4); border-bottom: var(--traco) dashed var(--linha-media-cor); font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-size: var(--fs-etiqueta); letter-spacing: var(--ls-etiqueta); }
/* cada número ocupa o que precisa (R$ 1.840 não quebra) e a comanda dobra em duas linhas no celular */
.comanda__itens { display: flex; flex-wrap: wrap; gap: var(--e-4) 0; margin: 0; }
.comanda__item { flex: 1 1 calc(var(--e-10) + var(--e-6)); display: grid; align-content: start; gap: var(--e-1); padding: 0 var(--e-4); border-left: var(--traco) dashed var(--linha-media-cor); }
.comanda__item:first-child { border-left: 0; padding-left: 0; }
.comanda__item dt { order: 1; font-size: var(--fs-legenda); color: var(--texto-2); }
.comanda__item dd { margin: 0; }
.comanda__numero { order: 0; font-family: var(--letra-numero); font-weight: var(--peso-normal); font-size: var(--fs-h2); line-height: var(--lh-titulo); letter-spacing: var(--ls-justo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.comanda__nota { order: 2; margin-top: var(--e-1); }
.comanda__nota .selo { max-width: 100%; white-space: normal; }
/* comanda estreita (celular): dois números por linha, o dinheiro ocupa a linha de baixo inteira */
.comanda { container-type: inline-size; }
@container (max-width: 520px) {
  .comanda__itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); }
  .comanda__item { padding: 0; border-left: 0; }
  .comanda__item:last-child { grid-column: 1 / -1; padding-top: var(--e-4); border-top: var(--traco) dashed var(--linha-media-cor); }
}

/* 7.25 GRÁFICO DE BARRAS DE PAPEL ------------------------------------------------ */
.grafico { --grafico-alto: var(--e-11); position: relative; display: grid; gap: var(--e-4); margin: 0; padding-bottom: var(--e-5); }
.grafico__titulo { font-family: var(--letra-titulo); font-weight: var(--peso-h4); font-size: var(--fs-h5); }
.grafico__barras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: var(--e-2); padding-top: var(--e-6); border-bottom: var(--traco) solid var(--linha-forte-cor); }
.grafico__barra { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e-1); }
.grafico__barra::before {
  content: "";
  order: 1;
  width: min(100%, var(--e-7));
  height: calc(var(--v) / 100 * var(--grafico-alto));
  border: var(--traco-fino) solid var(--linha-media-cor);
  border-bottom: 0;
  border-radius: var(--raio-papel) var(--raio-papel) 0 0;
  background-color: var(--fundo-3);
  background-image: var(--textura-fibras);
  background-size: var(--tam-fibras) var(--tam-fibras);
  transform-origin: 50% 100%;
}
.grafico__barra b { order: 0; font-size: var(--fs-legenda); font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; }
.grafico__barra i { order: 2; position: absolute; top: calc(100% + var(--e-2)); font-style: normal; font-size: var(--fs-mini); color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grafico__barra--agora::before { background-color: var(--lilas); border-color: var(--linha-forte-cor); }
.grafico__barra--pico::before { background-color: var(--manteiga); border-color: var(--linha-forte-cor); }
/* anotação à caneta: um círculo em volta do número e um recadinho do lado */
.grafico__circulo { left: -30%; top: calc(var(--e-2) * -1); width: 160%; height: calc(var(--e-6) + var(--e-1)); }
.grafico__nota { position: absolute; top: calc(var(--e-2) * -1); left: calc(100% + var(--e-3)); font-family: var(--letra-titulo); font-style: italic; font-weight: var(--peso-h4); font-size: var(--fs-texto-p); line-height: var(--lh-ui); white-space: nowrap; color: var(--erro-texto); rotate: calc(var(--giro-2) * -1); }
/* as barras crescem do chão quando o gráfico aparece (uma vez) */
html.js .grafico.in .grafico__barra::before { animation: barra-cresce var(--t-folha) var(--ease-saida) both; animation-delay: calc(var(--i, 0) * var(--atraso-passo)); }
@keyframes barra-cresce { from { transform: scaleY(0); } }

/* 7.26 QUADRO DE PROJETOS (kanban) e a ficha de tarefa ---------------------------- */
.quadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); align-items: start; }
@media screen and (max-width: 900px) {
  .quadro { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, var(--coluna-g)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--e-3); }
  .quadro__coluna { scroll-snap-align: start; }
}
.quadro__coluna { display: grid; gap: var(--e-3); align-content: start; min-height: 100%; padding: var(--e-3); background: var(--fundo-2); border-radius: var(--raio-etiqueta); }
.quadro__titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-1); font-size: var(--fs-texto-p); }
.quadro__conta { font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; color: var(--texto-2); }
.tarefa {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-4);
  background: var(--superficie);
  color: var(--texto);
  border: var(--traco) solid var(--linha-forte-cor);
  border-radius: var(--raio-papel);
  box-shadow: var(--sombra-dura-baixa);
  transition: transform var(--t-rapido) var(--ease-mola), box-shadow var(--t-rapido) var(--ease-papel);
}
@media (hover: hover) { .tarefa:hover { transform: translateY(calc(var(--e-1) * -1)) rotate(calc(var(--giro-1) * -1)); box-shadow: var(--sombra-dura); } }
.tarefa__titulo { font-family: var(--letra-titulo); font-weight: var(--peso-h4); font-size: var(--fs-h6); line-height: var(--lh-titulo-2); }
.tarefa__cliente { font-size: var(--fs-legenda); color: var(--texto-2); }
.tarefa__pe { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-1); padding-top: var(--e-2); border-top: var(--traco-fino) dashed var(--linha-media-cor); }
.tarefa__prazo { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--fs-legenda); font-variant-numeric: tabular-nums; color: var(--texto-2); }
.tarefa__prazo--vencendo { color: var(--erro-texto); font-weight: var(--peso-semi); }
.tarefa--aberta { box-shadow: var(--desloca-duro) var(--desloca-duro) 0 var(--lilas-3); }
.tarefa--feita { box-shadow: none; border-style: dashed; }

/* 7.27 CASCA DO APP (A9 CRM): barra lateral + miolo ------------------------------ */
.app { color: var(--texto); }
.app__corpo { display: grid; grid-template-columns: var(--barra-lateral) minmax(0, 1fr); background: var(--fundo); transition: background-color var(--t-base) var(--ease-papel); }
@media screen and (max-width: 1000px) { .app__corpo { grid-template-columns: minmax(0, 1fr); } .app__lateral { display: none; } }
.app__principal { display: grid; gap: var(--e-6); align-content: start; min-width: 0; padding: var(--e-5) var(--e-6) var(--e-7); }
@media screen and (max-width: 640px) { .app__principal { padding: var(--e-4) var(--e-4) var(--e-6); } }
.app__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); }
.app__ola { margin-right: auto; }
.app__saudacao { font-family: var(--letra-titulo); font-weight: var(--peso-h3); font-size: var(--fs-h3); line-height: var(--lh-titulo); letter-spacing: var(--ls-justo); }
.app__data { font-size: var(--fs-legenda); color: var(--texto-2); }
.app__data::first-letter { text-transform: uppercase; }
.app__busca { flex: 0 1 var(--coluna-g); }
.app__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--e-6); align-items: start; }
@media screen and (max-width: 1100px) { .app__grade { grid-template-columns: minmax(0, 1fr); } }
.app__lista-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-3); }
.app__lista-titulo { font-family: var(--letra-titulo); font-weight: var(--peso-h4); font-size: var(--fs-h5); }
.app__pessoa { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: var(--peso-semi); }
.app__contador { margin-left: auto; }
/* o recado da Dona Alma: a única colagem dentro da tela de trabalho */
.app__dona {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-4);
  align-items: center;
  max-width: calc(var(--largura-texto) * .9);
  padding: var(--e-4) var(--e-5);
  background-color: var(--manteiga);
  background-image: var(--textura-fibras);
  background-size: var(--tam-fibras) var(--tam-fibras);
  color: var(--tinta);
  border-radius: var(--raio-papel);
  box-shadow: var(--sombra-solta);
  transform: rotate(calc(var(--giro-0) * -1));
}
.app__dona-mascote { width: var(--e-9); height: auto; }
.app__dona-texto { display: grid; gap: var(--e-3); }
.app__dona-texto p { font-family: var(--letra-titulo); font-style: italic; font-weight: var(--peso-h4); font-size: var(--fs-h5); line-height: var(--lh-titulo-2); }
@media screen and (max-width: 520px) { .app__dona { grid-template-columns: minmax(0, 1fr); } .app__dona-mascote { width: var(--e-8); } }
.pipeline__painel { max-width: none; margin-top: var(--e-6); padding: var(--e-4) var(--e-5); min-height: calc(var(--lh-texto) * 2em + var(--e-4) * 2); background: var(--superficie); border: var(--traco) solid var(--linha-forte-cor); border-left-width: var(--traco-caneta); border-radius: var(--raio-papel); }

/* 7.28 VOLTAR AO TOPO (#back-to-top, 412.digital) — aparece depois da primeira tela e acompanha ---- */
.volta-topo {
  position: fixed;
  right: calc(var(--e-4) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-cabecalho);
  display: grid;
  place-items: center;
  width: var(--alvo-g);
  height: var(--alvo-g);
  border: var(--traco-forte) solid var(--tinta);
  border-radius: var(--raio-adesivo);
  background: var(--manteiga);
  color: var(--tinta);
  box-shadow: var(--desloca-duro) var(--desloca-duro) 0 var(--tinta);
  opacity: 0;
  visibility: hidden;
  translate: 0 var(--e-4);
  transition: opacity var(--t-base) var(--ease-papel), translate var(--t-base) var(--ease-mola), visibility 0s linear var(--t-base), transform var(--t-rapido) var(--ease-mola);
}
.volta-topo.visivel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
@media (hover: hover) { .volta-topo:hover { transform: translateY(calc(var(--e-1) * -1)) rotate(calc(var(--giro-2) * -1)); } }
.volta-topo:active { transform: translate(var(--desloca-duro-baixo), var(--desloca-duro-baixo)); box-shadow: var(--desloca-duro-baixo) var(--desloca-duro-baixo) 0 var(--tinta); }
.volta-topo .icone { width: var(--icone-m); height: var(--icone-m); }


/* 8. MOVIMENTO -------------------------------------------------------------------
   A colagem respira. Toda peça entra COLADA: stop motion a 12 quadros por segundo
   (cada trecho do keyframe segura a pose: steps(1, end)), pousa com um achatamento
   de um quadro e a sombra encolhe. Depois RESPIRA: 2 quadros a 8 fps.
   Tudo o que repete para sozinho com a preferência do sistema ou no botão
   "Pausar movimento" (WCAG 2.2.2). */

/* 8.1 Os gestos da casa */
/* --filtro-base: o filtro próprio da peça (a borda do adesivo) continua durante e depois do pouso */
@keyframes colar {
  0%   { opacity: 0; transform: translate(var(--colar-x, 0px), var(--colar-y, var(--colar-altura))) rotate(calc(var(--giro, 0deg) + var(--colar-giro, var(--colar-torcao)))) scale(1.1); filter: var(--filtro-base,) drop-shadow(0 18px 14px var(--tinta-a24)); }
  17%  { opacity: 1; transform: translate(calc(var(--colar-x, 0px) * .45), calc(var(--colar-y, var(--colar-altura)) * .45)) rotate(calc(var(--giro, 0deg) + var(--colar-giro, var(--colar-torcao)) * .45)) scale(1.06); filter: var(--filtro-base,) drop-shadow(0 10px 9px var(--tinta-a24)); }
  33%  { opacity: 1; transform: translate(0, 1px) rotate(calc(var(--giro, 0deg) + var(--colar-giro, var(--colar-torcao)) * .1)) scale(1.03, .96); filter: var(--filtro-base,) drop-shadow(0 3px 3px var(--tinta-a16)); }
  50%  { opacity: 1; transform: translate(0, 0) rotate(var(--giro, 0deg)) scale(.99, 1.015); filter: var(--filtro-base,) drop-shadow(0 1px 1px var(--tinta-a12)); }
  67%  { opacity: 1; transform: rotate(var(--giro, 0deg)) scale(1.005, .995); filter: var(--filtro-base, none); }
  100% { opacity: 1; transform: rotate(var(--giro, 0deg)); filter: var(--filtro-base, none); }
}
@keyframes descolar {
  0%   { opacity: 1; transform: rotate(var(--giro, 0deg)); }
  100% { opacity: 0; transform: translate(0, -12px) rotate(calc(var(--giro, 0deg) + var(--giro-4))) scale(1.04); }
}
@keyframes respirar {
  0%, 100% { transform: rotate(var(--giro, 0deg)); }
  50%      { transform: translate(var(--respiro-x), calc(var(--respiro-x) * -.6)) rotate(calc(var(--giro, 0deg) + var(--respiro-giro))); }
}
@keyframes carimbar {
  0%   { opacity: 0; transform: scale(1.7) rotate(calc(var(--giro, calc(var(--giro-4) * -1)) - var(--giro-5) * 1.5)); }
  55%  { opacity: 1; transform: scale(.92) rotate(var(--giro, calc(var(--giro-4) * -1))); }
  78%  { transform: scale(1.04) rotate(var(--giro, calc(var(--giro-4) * -1))); }
  100% { opacity: 1; transform: scale(1) rotate(var(--giro, calc(var(--giro-4) * -1))); }
}
@keyframes rasgar-abre {
  0%   { opacity: 0; transform: scale(.32) rotate(-6deg); }
  20%  { opacity: 1; transform: scale(.5) rotate(-4deg); }
  40%  { transform: scale(.72) rotate(-2deg); }
  60%  { transform: scale(.9) rotate(-.5deg); }
  80%  { transform: scale(1.02) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes escrever { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes riscar { from { transform: rotate(calc(var(--giro-1) * -1)) scaleX(0); } to { transform: rotate(calc(var(--giro-1) * -1)) scaleX(1); } }
@keyframes virar-folha {
  from { transform: translateY(var(--e-9)); }
  to   { transform: translateY(0); }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(var(--e-6)); }
  to   { opacity: 1; transform: none; }
}
@keyframes gaveta-sobe { from { transform: translateY(100%); } to { transform: none; } }
@keyframes gaveta-desce { from { transform: none; } to { transform: translateY(100%); } }
@keyframes recorte-anda {
  to { background-position: var(--tracejado) 0, calc(var(--tracejado) * -1) 100%, 0 calc(var(--tracejado) * -1), 100% var(--tracejado); }
}
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes brilho-papel { from { background-position: 150% 0, 0 0; } to { background-position: -150% 0, 0 0; } }
@keyframes balancar {
  0%, 100% { transform: rotate(var(--giro, 0deg)); }
  25% { transform: rotate(calc(var(--giro, 0deg) - var(--giro-3))); }
  75% { transform: rotate(calc(var(--giro, 0deg) + var(--giro-3))); }
}
@keyframes cair {
  0%   { opacity: 0; transform: translateY(-120vh) rotate(calc(var(--giro, 0deg) - 40deg)); }
  60%  { opacity: 1; transform: translateY(6%) rotate(calc(var(--giro, 0deg) + 4deg)); }
  78%  { transform: translateY(-5%) rotate(calc(var(--giro, 0deg) - 2deg)); }
  90%  { transform: translateY(1%) rotate(var(--giro, 0deg)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--giro, 0deg)); }
}
@keyframes marca-texto { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes luz-anda {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(6%, -4%) scale(1.08); }
  66%  { transform: translate(-5%, 5%) scale(.94); }
}
@keyframes piscar-olho { 0%, 92%, 100% { opacity: 1; } 94%, 98% { opacity: 0; } }

/* 8.2 Os nomes que vieram dos templates (mesmo nome, mesmo gesto) */
@keyframes dl-grain {            /* designer-landing: grão */
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1.5%); }
  50% { transform: translate(1.5%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}
@keyframes dl-breathe {          /* designer-landing: a sombra que respira */
  0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .9; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes dl-bob {              /* designer-landing: seta ↓ */
  0%, 100% { transform: translateY(0); opacity: .9; }
  50% { transform: translateY(7px); opacity: .5; }
}
@keyframes pulse {               /* Overprint: ponto que pulsa */
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(2); opacity: .3; }
}
@keyframes otflash {             /* Overprint: clarão das placas */
  0% { text-shadow: -6px 0 var(--placa-c), 6px 0 var(--placa-m), 0 5px var(--placa-y); }
  100% { text-shadow: none; }
}
@keyframes load { to { transform: scaleX(1); } }   /* Overprint: barras do carregando */
@keyframes blink { 50% { opacity: 0; } }           /* Tide: cursor */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Tide: letreiro */
@keyframes signal {              /* Tide: sinal no pipeline */
  0% { left: 0%; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes pulse-ring {          /* Tide: anel de quem está ativo */
  0% { box-shadow: 0 0 0 0 rgb(var(--lilas-rgb) / .75); }
  100% { box-shadow: 0 0 0 var(--pulso-raio) rgb(var(--lilas-rgb) / 0); }
}

/* 8.3 Classes de gesto */
.colado { animation: none !important; opacity: 1 !important; } /* o JS marca ao fim da entrada: o :hover volta a mandar no transform */
.colando { animation: colar var(--t-colar) steps(1, end) both; }
.respira { animation: respirar var(--t-respiro) steps(1, end) infinite; }
.carimbando { animation: carimbar var(--t-carimbo) var(--ease-papel) both; }
.balanca:hover, .balancando { animation: balancar var(--t-colar) steps(1, end) 2; }
.luz {
  position: absolute;
  z-index: var(--z-base);
  pointer-events: none;
  border-radius: 50%;
  filter: blur(var(--luz-desfoque));
  animation: luz-anda var(--t-luz-anda) var(--ease-papel) infinite;
}
.escrevendo path, .escrevendo ellipse, .escrevendo line, .escrevendo polyline {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: escrever var(--t-escrever) var(--ease-saida) forwards;
  animation-delay: calc(var(--atraso, 0ms) + var(--i, 0) * var(--atraso-traco));
}
.escrevendo .fino { animation-delay: calc(var(--atraso, 0ms) + var(--i, 0) * var(--atraso-traco) + var(--atraso-fino)); }
.riscado.riscando::after { animation: riscar var(--t-colar) var(--ease-saida) both; animation-delay: var(--atraso, 0ms); }
.marca-texto.marcando { animation: marca-texto var(--t-folha) var(--ease-saida) both; animation-delay: var(--atraso, 0ms); }
.seta-bob { display: inline-block; animation: dl-bob var(--t-boia) ease-in-out infinite; }

/* 8.4 Revelação no scroll — o JS observa e marca .in (Overprint/Patch),
   .is-visible (Tide) e .colando. Sem JS, nada fica escondido (html.js). */
html.js [data-colar]:not(.in),
html.js .reveal:not(.in):not(.is-visible),
html.js .reveal-up:not(.in) { opacity: 0; }
[data-colar].in,
.reveal.in, .reveal.is-visible,
.reveal-up.in {
  animation: colar var(--t-colar) steps(1, end) both;
  animation-delay: calc(var(--ordem, 0) * var(--atraso-passo));
}
[data-colar="respira"].in {
  animation:
    colar var(--t-colar) steps(1, end) both calc(var(--ordem, 0) * var(--atraso-passo)),
    respirar var(--t-respiro) steps(1, end) calc(var(--ordem, 0) * var(--atraso-passo) + var(--t-colar)) infinite;
}
[data-colar="carimbo"].in { animation: carimbar var(--t-carimbo) var(--ease-papel) both; animation-delay: calc(var(--ordem, 0) * var(--atraso-passo) + var(--atraso, 0ms)); }
[data-colar="subir"].in { animation: subir var(--t-folha) var(--ease-saida) both; animation-delay: calc(var(--ordem, 0) * var(--atraso-passo)); }
[data-colar="rasgo"].in { animation: rasgar-abre var(--t-folha) steps(1, end) both; animation-delay: calc(var(--ordem, 0) * var(--atraso-passo)); }
[data-colar="cair"].in { animation: cair var(--t-lento) var(--ease-saida) both; animation-delay: calc(var(--ordem, 0) * var(--atraso-passo)); }

/* palavras que sobem da máscara (412.digital .title-word) */
.palavra-mascara { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
html.js .titulo-sobe .title-word { display: inline-block; transform: translateY(108%) rotate(var(--giro-2)); transform-origin: 0 100%; }
html.js .titulo-sobe.in .title-word {
  transform: none;
  transition: transform var(--t-folha) var(--ease-saida);
  transition-delay: calc(var(--i, 0) * var(--atraso-passo));
}
/* palavras que viram de pé (Patch .h-anim .h-word) */
.h-anim .h-line { display: block; overflow: hidden; perspective: 200vw; padding: 0 .1em; margin: 0 -.1em; }
html.js .h-anim .h-word { display: inline-block; transform: translateY(75%) rotateX(-88deg); transform-origin: 50% 75%; }
html.js .h-anim.in .h-word { transform: none; transition: transform var(--t-palavra) var(--ease-palavra); transition-delay: calc(var(--i, 0) * var(--atraso-palavra)); }

/* a folha nova desliza por cima da anterior (scroll ligado, onde houver suporte) */
@supports (animation-timeline: view()) {
  .folha--desliza {
    animation: virar-folha linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}

/* 8.5 Pausa: sistema (reduced motion) e botão da página ------------------------- */
html[data-movimento="pausado"] :is(.grao, .respira, [data-colar="respira"], .luz, .letreiro__trilho, .marquee .track, .marquee-track, .rollingBanner__rail, .studioMarquee, .signal-dot, .pipeline__sinal, .node-active, .selo--fazendo .selo__ponto, .caret, .carregando > i, .esqueleto, .seta-bob, .linha-tempo__item--fazendo .linha-tempo__marca),
html[data-movimento="pausado"] .cupom::before,
.fora-de-cena :is(.respira, [data-colar="respira"], .luz, .letreiro__trilho, .signal-dot, .pipeline__sinal, .caret, .esqueleto, .grao--local),
.fora-de-cena .cupom::before {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .grao, .respira, .luz, .letreiro__trilho, .marquee .track, .marquee-track, .rollingBanner__rail, .studioMarquee,
  .signal-dot, .pipeline__sinal, .node-active, .selo--fazendo .selo__ponto, .caret, .carregando > i, .esqueleto, .seta-bob, .cupom::before {
    animation: none !important;
  }
  .letreiro, .marquee, .rollingBanner { overflow-x: auto; }
  html.js [data-colar], html.js .reveal, html.js .reveal-up { opacity: 1 !important; animation: none !important; transform: rotate(var(--giro, 0deg)) !important; }
  html.js .titulo-sobe .title-word, html.js .h-anim .h-word { transform: none !important; }
  .escrevendo path, .escrevendo ellipse, .escrevendo line, .escrevendo polyline { stroke-dashoffset: 0 !important; animation: none !important; }
  .chroma > span { transform: none !important; }
}

/* 9. UTILITÁRIOS ------------------------------------------------------------------ */
.miolo { width: min(100% - var(--calha) * 2, var(--largura)); margin-inline: auto; }
.pilha-v { display: grid; gap: var(--pilha-gap, var(--e-4)); align-content: start; }
.linha-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--linha-gap, var(--e-3)); }
.icone { width: var(--icone-m); height: var(--icone-m); flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icone--p { width: var(--icone-p); height: var(--icone-p); }
.icone--g { width: var(--icone-g); height: var(--icone-g); }
.so-celular { display: none; }
.empurra { margin-inline-start: auto; }  /* empurra para o fim da linha */
.cresce { flex: 1 1 0; min-width: 0; }  /* ocupa o que sobrar */
@media screen and (max-width: 767px) {
  .so-celular { display: revert; }
  .esconde-celular { display: none !important; }
}

/* 10. IMPRESSÃO (proposta, relatório, papelaria) --------------------------------- */
@media print {
  .grao, .luz, .cabecalho, .menu-cheio, .recados, .gaveta, .letreiro, .folha__rasgo, .nao-imprimir { display: none !important; }
  html.js [data-colar], html.js .reveal, html.js .reveal-up { opacity: 1 !important; animation: none !important; }
  .folha { padding-block: var(--e-7); break-inside: auto; }
  a { text-decoration-color: currentColor; }
  body { background: var(--branco-puro); }
}

/* 11. FOCO — por último e com especificidade de componente, para nenhuma
   classe de botão engolir o anel (armadilha 8 do DS v4) ------------------------ */
.botao:focus-visible, .button:focus-visible, button.chip:focus-visible, .abas__aba:focus-visible,
.sanfona__item > summary:focus-visible, .barra-lateral__item:focus-visible, .barra-abas__item:focus-visible,
.pipeline__no:focus-visible, .janela__fechar:focus-visible, .hamburguer:focus-visible, a:focus-visible,
.escolha input:focus-visible, .chave input:focus-visible, .regua input:focus-visible {
  outline: var(--traco-caneta) solid var(--foco);
  outline-offset: var(--e-1);
  transition-property: transform, box-shadow, background-color, color;
}
.entrada:focus-visible { outline: none; }

/* ==========================================================================
   6. REDES — as peças do acervo (2026-10-01, PLANO-REDES.md)
   As três vozes da letra, a folha ameixa, os óculos da vó e a lente,
   o desfoque, a barra da série e a emenda entre lâminas.
   Medidas de peça em pixels da arte: var(--px) vem da prancha
   (100cqi / 1080); fora de uma prancha, vale 1px.
   ========================================================================== */

/* 6.1 A voz de canto tem cor própria por folha (contraste medido; a Shantell 700 entra
   sempre como letra grande: 24px ou mais na tela) */
:root,
[data-folha="papel"], [data-folha="branco"], [data-folha="lilas"], [data-folha="menta"],
[data-folha="rosa"], [data-folha="manteiga"] { --mao: var(--lilas-tinta); }   /* 4,5:1 no lilás, 5,8:1 no rosa, 7,8:1 no papel */
[data-folha="kraft"] { --mao: var(--tinta); }
[data-folha="tinta"] { --mao: var(--manteiga); }                              /* 11,4:1 */

/* 6.2 Folha ameixa: o roxo do cabelo da mascote, para as lâminas de volume alto.
   Sem cor nova: os passos saem da mistura com a tinta. */
[data-folha="ameixa"] {
  --ameixa-2: color-mix(in srgb, var(--ameixa), var(--tinta) 16%);
  --ameixa-3: color-mix(in srgb, var(--ameixa), var(--tinta) 30%);
  --fundo: var(--ameixa);
  --fundo-2: var(--ameixa-2);
  --fundo-3: var(--ameixa-3);
  --superficie: var(--ameixa-2);
  --superficie-2: var(--ameixa-3);
  --texto: var(--branco);        /* 6,6:1 */
  --texto-2: var(--papel);       /* 5,7:1 */
  --texto-3: var(--bochecha);    /* 4,6:1 */
  --linha-cor: var(--papel-a18);
  --linha-media-cor: var(--papel-a32);
  --linha-forte-cor: var(--papel);
  --link: var(--papel);
  --sublinhado: var(--manteiga);
  --foco: var(--manteiga);
  --grade: var(--grade-noite);
  --tira-fundo: var(--papel);
  --sombra-cor: rgb(var(--preto-rgb) / .45);
  --mistura: screen;
  --principal-fundo: var(--papel);
  --principal-texto: var(--ameixa);  /* 5,7:1 */
  --marcado: var(--ameixa);
  --chave-ligada: var(--manteiga);
  --erro-texto: var(--bochecha);
  --ok-texto: var(--menta);          /* 4,7:1 */
  --rasgo-fibra: var(--papel-a32);
  --rasgo-sombra: rgb(var(--preto-rgb) / .3);
  --mao: var(--manteiga);            /* 5,1:1 */
  --icone-lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDE6DA' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
  --icone-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDE6DA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* 6.3 As três vozes. A alta é a manchete que já existe (.t-manchete, Spot; números em Sink). */
.t-mao {
  font-family: var(--letra-mao);
  font-weight: var(--peso-forte);
  line-height: var(--lh-mao);
  letter-spacing: var(--ls-zero);
  color: var(--mao);
  text-wrap: balance;
}
.t-tela {
  font-family: var(--letra-tela);
  font-weight: var(--peso-normal);
  line-height: var(--lh-tela);
  letter-spacing: var(--ls-zero);
  font-synthesis: none;
}

/* 6.4 Desfoque: a palavra que pesa fica fora de foco (uma por lâmina; nunca no miolo) */
.desfocado { filter: blur(calc(var(--px, var(--px-fora)) * var(--desfoque, var(--desfoque-2)))); }
.desfocado--1 { --desfoque: var(--desfoque-1); }
.desfocado--3 { --desfoque: var(--desfoque-3); }

/* 6.5 Os óculos da vó (o elemento-assinatura das redes): vão em qualquer foto.
   <svg class="oculos" viewBox="0 0 1000 560"><use href="#oculos"/></svg>
   Variáveis: --oculos-armacao, --oculos-conta, --oculos-vidro, --oculos-cordinha (0 esconde). */
.oculos {
  display: block;
  pointer-events: none;
  width: calc(var(--px, var(--px-fora)) * var(--oculos-arte));
  height: auto;
  aspect-ratio: var(--oculos-proporcao);
  overflow: visible;
}

/* em foto: sem borda de adesivo (ela enche as lentes de branco), só uma sombra curta */
.oculos--foto { filter: drop-shadow(0 var(--e-0) var(--e-1) var(--tinta-a40)); }

/* 6.6 A lente: o texto fica fora de foco e só entra em foco dentro das lentes.
   O JS clona o texto (.lente__foco) numa cópia desfocada, só para o olho, e liga a máscara.
   Sem JS, o texto aparece inteiro e nítido. Posição: --lente-x e --lente-y (centro das lentes).
   A .lente não leva padding: o respiro vai no .lente__foco (a cópia herda), senão a máscara
   e os óculos medem caixas diferentes e o foco escorrega para fora das lentes. */
@property --lente-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --lente-y { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.lente {
  --oculos-l: calc(var(--px, var(--px-fora)) * var(--oculos-arte));
  --lente-rx: calc(var(--oculos-l) * var(--oculos-lente-rx));
  --lente-ry: calc(var(--oculos-l) * var(--oculos-lente-ry));
  --lente-dx: calc(var(--oculos-l) * var(--oculos-lente-dx));
  position: relative;
  transition: --lente-x var(--t-folha) var(--ease-papel), --lente-y var(--t-folha) var(--ease-papel);
}
.lente.arrastando { transition: none; }
.lente__foco { position: relative; z-index: var(--z-base); }
.lente__fora {
  position: absolute;
  inset: 0;
  filter: blur(calc(var(--px, var(--px-fora)) * var(--desfoque, var(--desfoque-2))));
  user-select: none;
  pointer-events: none;
}
.lente--pronta .lente__fora {
  -webkit-mask-image:
    radial-gradient(var(--lente-rx) var(--lente-ry) at calc(var(--lente-x) - var(--lente-dx)) var(--lente-y), var(--preto-puro) var(--lente-borda), transparent),
    radial-gradient(var(--lente-rx) var(--lente-ry) at calc(var(--lente-x) + var(--lente-dx)) var(--lente-y), var(--preto-puro) var(--lente-borda), transparent),
    linear-gradient(var(--preto-puro), var(--preto-puro));
  mask-image:
    radial-gradient(var(--lente-rx) var(--lente-ry) at calc(var(--lente-x) - var(--lente-dx)) var(--lente-y), var(--preto-puro) var(--lente-borda), transparent),
    radial-gradient(var(--lente-rx) var(--lente-ry) at calc(var(--lente-x) + var(--lente-dx)) var(--lente-y), var(--preto-puro) var(--lente-borda), transparent),
    linear-gradient(var(--preto-puro), var(--preto-puro));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;   /* a cópia desfocada some dentro das lentes: lá só fica o nítido */
}
.lente--pronta .lente__foco {
  -webkit-mask-image:
    radial-gradient(var(--lente-rx) var(--lente-ry) at calc(var(--lente-x) - var(--lente-dx)) var(--lente-y), var(--preto-puro) var(--lente-borda), transparent),
    radial-gradient(var(--lente-rx) var(--lente-ry) at calc(var(--lente-x) + var(--lente-dx)) var(--lente-y), var(--preto-puro) var(--lente-borda), transparent);
  mask-image:
    radial-gradient(var(--lente-rx) var(--lente-ry) at calc(var(--lente-x) - var(--lente-dx)) var(--lente-y), var(--preto-puro) var(--lente-borda), transparent),
    radial-gradient(var(--lente-rx) var(--lente-ry) at calc(var(--lente-x) + var(--lente-dx)) var(--lente-y), var(--preto-puro) var(--lente-borda), transparent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.lente__oculos {
  position: absolute;
  z-index: var(--z-colagem);
  left: var(--lente-x);
  top: var(--lente-y);
  width: var(--oculos-l);
  aspect-ratio: var(--oculos-proporcao);
  translate: -50% calc(var(--oculos-l) * var(--oculos-lente-y) * -1);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
.lente__oculos .oculos { width: 100%; }
button.lente__oculos { cursor: grab; touch-action: none; border-radius: var(--raio-adesivo); }
.lente.arrastando button.lente__oculos { cursor: grabbing; }
button.lente__oculos:focus-visible { outline: var(--traco-forte) solid var(--foco); outline-offset: var(--e-1); }
@media (prefers-reduced-motion: reduce) { .lente { transition: none; } }
[data-movimento="pausado"] .lente { transition: none; }

/* 6.7 A barra da série: nome à esquerda, número à direita (Sink, caixa alta), sempre no mesmo lugar */
.barra-serie {
  position: absolute;
  left: calc(var(--px, var(--px-fora)) * var(--arte-margem));
  right: calc(var(--px, var(--px-fora)) * var(--arte-margem));
  top: calc(var(--px, var(--px-fora)) * var(--barra-serie-topo));
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--px, var(--px-fora)) * var(--arte-margem));
  margin: 0;
  font-family: var(--letra-etiqueta);
  text-transform: var(--caixa-etiqueta);
  font-size: calc(var(--px, var(--px-fora)) * var(--barra-serie-letra));
  letter-spacing: var(--ls-etiqueta);
  line-height: var(--lh-titulo);
  color: var(--texto-2);
}

/* 6.8 A emenda: o que atravessa de uma lâmina para a próxima (metade em cada uma) */
.emenda { position: absolute; width: calc(var(--px, var(--px-fora)) * var(--emenda-l)); }
.emenda--sai { right: calc(var(--px, var(--px-fora)) * var(--emenda-l) * -.5); }
.emenda--entra { left: calc(var(--px, var(--px-fora)) * var(--emenda-l) * -.5); }

/* ==========================================================================
   6.9 MOLDURAS DA CASA (iteração 2): o texto e a foto sempre escritos em alguma coisa.
   Todas medem em pixels da arte (--px na prancha; 1px fora dela).
   ========================================================================== */

/* Selo de carta: serrilha por máscara (furo de raio --selo-dente; a borda branca tem 2 furos
   de largura). Moldura de lâmina inteira ou de foto, um por lâmina. O miolo declara a folha. */
.selo-carta {
  --selo-r: calc(var(--px, var(--px-fora)) * var(--selo-dente));
  position: relative;
  padding: calc(var(--selo-r) * 2);
  background: var(--branco);
  -webkit-mask:
    radial-gradient(var(--selo-r), transparent 97%, var(--preto-puro)) round calc(var(--selo-r) * -1.5) calc(var(--selo-r) * -1.5) / calc(var(--selo-r) * 3) calc(var(--selo-r) * 3),
    linear-gradient(var(--preto-puro) 0 0) no-repeat 50% / calc(100% - var(--selo-r) * 3) calc(100% - var(--selo-r) * 3);
  mask:
    radial-gradient(var(--selo-r), transparent 97%, var(--preto-puro)) round calc(var(--selo-r) * -1.5) calc(var(--selo-r) * -1.5) / calc(var(--selo-r) * 3) calc(var(--selo-r) * 3),
    linear-gradient(var(--preto-puro) 0 0) no-repeat 50% / calc(100% - var(--selo-r) * 3) calc(100% - var(--selo-r) * 3);
}
.selo-carta__miolo { height: 100%; background-color: var(--fundo); background-image: var(--textura-fibras); background-size: var(--tam-fibras) var(--tam-fibras); }
.com-sombra { filter: drop-shadow(0 var(--e-1) var(--e-2) var(--tinta-a24)); }   /* máscara corta sombra: ela vai num pai */

/* o carimbo do correio que vem com o selo-carta (tomate, gasto, assentado no papel) */
.carimbo-correio {
  display: block;
  width: calc(var(--px, var(--px-fora)) * 460);
  aspect-ratio: 560 / 240;
  color: var(--tomate);
  mix-blend-mode: var(--mistura, multiply);
  -webkit-mask-image: var(--mascara-gasto);
  mask-image: var(--mascara-gasto);
}

/* Foto de álbum: borda branca de foto revelada + quatro cantoneiras de papel. Só foto real. */
.album { --c: calc(var(--px, var(--px-fora)) * var(--cantoneira)); position: relative; display: grid; gap: calc(var(--px, var(--px-fora)) * 20); margin: 0; }
.album__foto { position: relative; }
.album__foto img { display: block; width: 100%; height: auto; border: calc(var(--px, var(--px-fora)) * var(--moldura-foto)) solid var(--branco); }
.album__foto::after {
  content: "";
  position: absolute;
  inset: calc(var(--px, var(--px-fora)) * var(--moldura-foto) * -.6);
  background:
    linear-gradient(to bottom right, var(--cantoneira-cor, var(--texto)) 50%, transparent 50%) top left / var(--c) var(--c) no-repeat,
    linear-gradient(to bottom left, var(--cantoneira-cor, var(--texto)) 50%, transparent 50%) top right / var(--c) var(--c) no-repeat,
    linear-gradient(to top left, var(--cantoneira-cor, var(--texto)) 50%, transparent 50%) bottom right / var(--c) var(--c) no-repeat,
    linear-gradient(to top right, var(--cantoneira-cor, var(--texto)) 50%, transparent 50%) bottom left / var(--c) var(--c) no-repeat;
  filter: drop-shadow(0 var(--e-0) var(--e-1) var(--tinta-a40));
  pointer-events: none;
}
.album > .album__legenda { justify-self: center; color: var(--mao); }   /* vence a legenda de figura da página */

/* Bilhete na geladeira: papel com pauta clara, preso por um ímã (a carinha da mascote).
   É a única voz de canto que pode passar de 8 palavras (até 25). Declara data-folha="branco". */
.bilhete-geladeira, .caderneta {
  --pauta-l: calc(var(--px, var(--px-fora)) * var(--pauta));
  position: relative;
  line-height: var(--pauta-l);
  color: var(--texto);
  box-shadow: var(--sombra-solta);
}
.bilhete-geladeira {
  padding: calc(var(--pauta-l) * 1.5) calc(var(--pauta-l)) var(--pauta-l);
  background-color: var(--fundo);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--pauta-l) - var(--traco)), var(--linha-cor) calc(var(--pauta-l) - var(--traco)) var(--pauta-l));
  background-position: 0 calc(var(--pauta-l) * .5 + var(--px, var(--px-fora)) * 8);
  transform: rotate(var(--giro, var(--giro-1)));
}
.bilhete-geladeira .t-mao { line-height: var(--pauta-l); }
.bilhete-geladeira__ima {
  position: absolute;
  left: 50%;
  top: calc(var(--px, var(--px-fora)) * var(--ima) * -.42);
  width: calc(var(--px, var(--px-fora)) * var(--ima));
  height: auto;
  translate: -50% 0;
  rotate: calc(var(--giro-3) * -1);
  filter: drop-shadow(0 var(--e-1) var(--e-1) var(--tinta-a40));
}

/* Caderneta: pauta e margem (rosa-tinta; o tomate fica para a caneta). Lista, conta, miolo. */
.caderneta {
  padding: var(--pauta-l) calc(var(--pauta-l) * .9) var(--pauta-l) calc(var(--px, var(--px-fora)) * var(--caderneta-margem) + var(--pauta-l) * .5);
  background-color: var(--fundo);
  background-image:
    linear-gradient(to right, transparent calc(var(--px, var(--px-fora)) * var(--caderneta-margem)), var(--rosa-tinta) 0 calc(var(--px, var(--px-fora)) * var(--caderneta-margem) + var(--traco-forte)), transparent 0),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--pauta-l) - var(--traco)), var(--linha-media-cor) calc(var(--pauta-l) - var(--traco)) var(--pauta-l));
  background-position: 0 0, 0 calc(var(--pauta-l) * .2);
}
.caderneta__num {
  position: absolute;
  left: 0;
  width: calc(var(--px, var(--px-fora)) * var(--caderneta-margem));
  top: calc(var(--pauta-l) * .7);
  text-align: center;
  font-family: var(--letra-numero);
  text-transform: var(--caixa-etiqueta);
  font-size: calc(var(--pauta-l) * 2.2);
  line-height: 1;
}

/* Janela antiga: o computador da vó (mesma janela do Reels da paciência, sem marca de ninguém).
   A frase do mercado, o horário, o erro. A letra é sempre a da tela. */
.janela-antiga {
  --rel: calc(var(--px, var(--px-fora)) * var(--janela-relevo));
  --relevo-cor: var(--branco) var(--tinta) var(--tinta) var(--branco);
  position: relative;
  background: var(--papel-3);
  border: var(--rel) solid;
  border-color: var(--relevo-cor);
  box-shadow: calc(var(--px, var(--px-fora)) * var(--janela-sombra)) calc(var(--px, var(--px-fora)) * var(--janela-sombra)) 0 var(--tinta);
  color: var(--tinta);
  font-family: var(--letra-tela);
  line-height: var(--lh-tela);
}
.janela-antiga__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--px, var(--px-fora)) * 16);
  height: calc(var(--px, var(--px-fora)) * var(--janela-barra));
  padding: 0 calc(var(--px, var(--px-fora)) * 12);
  background: var(--lilas);
  border-bottom: var(--rel) solid var(--tinta);
  font-size: calc(var(--px, var(--px-fora)) * 34);
  font-weight: var(--peso-semi);
  white-space: nowrap;
}
.janela-antiga__titulo { overflow: hidden; text-overflow: ellipsis; }
.janela-antiga__ctrl { display: flex; gap: calc(var(--px, var(--px-fora)) * 6); }
.janela-antiga__ctrl span, .janela-antiga__botao {
  display: grid;
  place-items: center;
  background: var(--papel-3);
  border: var(--rel) solid;
  border-color: var(--relevo-cor);
  line-height: 1;
}
.janela-antiga__ctrl span { width: calc(var(--px, var(--px-fora)) * var(--janela-botao)); height: calc(var(--px, var(--px-fora)) * (var(--janela-botao) - 4)); font-size: calc(var(--px, var(--px-fora)) * 28); }
.janela-antiga__corpo { padding: calc(var(--px, var(--px-fora)) * 40) calc(var(--px, var(--px-fora)) * 44); font-size: calc(var(--px, var(--px-fora)) * 52); }
.janela-antiga__botoes { display: flex; justify-content: flex-end; gap: calc(var(--px, var(--px-fora)) * 16); padding: 0 calc(var(--px, var(--px-fora)) * 44) calc(var(--px, var(--px-fora)) * 36); }
.janela-antiga__botao { min-width: calc(var(--px, var(--px-fora)) * 180); padding: calc(var(--px, var(--px-fora)) * 10) calc(var(--px, var(--px-fora)) * 24); font-size: calc(var(--px, var(--px-fora)) * 36); }
.janela-antiga--erro .janela-antiga__barra { background: var(--lilas-tinta); color: var(--branco); }

/* Balão de conversa: o canto reto aponta quem fala. Branco = quem chega; manteiga = a casa.
   Sem verde e sem rabicho: não é a tela de nenhum aplicativo. Conversa real e autorizada,
   ou marcada como exemplo. */
.balao-conversa {
  --balao-r: calc(var(--px, var(--px-fora)) * var(--balao-raio));
  --balao-c: calc(var(--px, var(--px-fora)) * var(--balao-canto));
  position: relative;
  width: fit-content;
  max-width: 82%;
  padding: calc(var(--px, var(--px-fora)) * 28) calc(var(--px, var(--px-fora)) * 40);
  background: var(--balao-fundo, var(--branco));
  color: var(--tinta);
  border: calc(var(--px, var(--px-fora)) * 4) solid var(--tinta);
  border-radius: var(--balao-r) var(--balao-r) var(--balao-r) var(--balao-c);
  box-shadow: calc(var(--px, var(--px-fora)) * 8) calc(var(--px, var(--px-fora)) * 8) 0 var(--tinta);
  font-size: calc(var(--px, var(--px-fora)) * 44);
  line-height: var(--lh-ui);
}
.balao-conversa--casa { --balao-fundo: var(--manteiga); margin-left: auto; border-radius: var(--balao-r) var(--balao-r) var(--balao-c) var(--balao-r); }
.balao-conversa__quem { display: block; margin-bottom: calc(var(--px, var(--px-fora)) * 8); font-size: calc(var(--px, var(--px-fora)) * 28); font-weight: var(--peso-semi); color: var(--tinta-2); }
.janela-antiga__max { display: block; width: 45%; height: 45%; border: calc(var(--rel) * .75) solid var(--tinta); border-top-width: calc(var(--rel) * 1.5); }

/* ==========================================================================
   6.10 TRATAMENTOS DE LETRA (iteração 3). Cada um tem regra de uso no DS.
   ========================================================================== */

/* Tarja da vó: o jargão do mercado pixelado na própria letra (o JS desenha o mosaico num
   canvas em resolução baixa). Só palavra da coluna "a gente não fala". O leitor de tela ouve
   o que estiver em data-tarja (ex.: "lead, palavra censurada"). */
.tarja { position: relative; display: inline-block; }
.tarja__palavra { visibility: hidden; }
.tarja__mosaico { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }

/* Frase em roda: em volta de objeto ou mascote. Até 40 caracteres; a letra vem da classe
   (.t-mao, .t-tela, Sink…). .roda--gira gira devagar e para com o botão de pausa. */
.roda { display: block; aspect-ratio: 1; }
.roda svg { display: block; width: 100%; height: 100%; overflow: visible; }
.roda text { font-size: var(--roda-letra); fill: currentColor; }
.roda--gira svg { animation: girar var(--t-giro-lento) linear infinite; }
@media (prefers-reduced-motion: reduce) { .roda--gira svg { animation: none; } }
html[data-movimento="pausado"] .roda--gira svg { animation-play-state: paused; }

/* Letras de ímã de geladeira: uma letra de plástico por vez, em Sink (sempre caixa alta).
   Até 3 palavras; as cores são as "-tinta" (dá pra ler no branco) e o tomate cai numa letra só. */
.ima-letras {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .04em;
  font-family: var(--letra-etiqueta);
  text-transform: var(--caixa-etiqueta);
  line-height: 1;
}
.ima-letras > span, .ima-sinal {
  --ima-cor: var(--lilas-tinta);
  color: var(--ima-cor);
  transform: rotate(var(--giro-letra, 0deg)) translateY(var(--sobe-letra, 0));
  text-shadow: 0 var(--ima-relevo) 0 color-mix(in srgb, var(--ima-cor), var(--tinta) 45%), 0 calc(var(--ima-relevo) * 2.4) calc(var(--ima-relevo) * 2) var(--tinta-a24);
}
.ima-letras > span:nth-child(6n+1) { --ima-cor: var(--lilas-tinta); --giro-letra: calc(var(--giro-3) * -1); }
.ima-letras > span:nth-child(6n+2) { --ima-cor: var(--menta-tinta); --giro-letra: var(--giro-2); --sobe-letra: -.03em; }
.ima-letras > span:nth-child(6n+3) { --ima-cor: var(--ameixa); --giro-letra: calc(var(--giro-1) * -1); }
.ima-letras > span:nth-child(6n+4) { --ima-cor: var(--rosa-tinta); --giro-letra: var(--giro-3); --sobe-letra: .03em; }
.ima-letras > span:nth-child(6n+5) { --ima-cor: var(--manteiga-tinta); --giro-letra: calc(var(--giro-2) * -1); }
.ima-letras > span:nth-child(6n+6) { --ima-cor: var(--tinta); --giro-letra: var(--giro-1); }
.ima-letras > span:nth-child(4) { --ima-cor: var(--tomate); }   /* o tomate, uma vez */
.ima-letras > span.espaco { min-width: .28em; text-shadow: none; }
/* o sinal de diferente, desenhado (nenhuma letra da casa tem ≠ além da Press Start 2P) */
.ima-sinal {
  --ima-traco: .11em;
  display: inline-block;
  width: .62em;
  height: .62em;
  color: transparent;
  text-shadow: none;
  background:
    linear-gradient(to top right, transparent calc(50% - var(--ima-traco) * .5), var(--ima-cor) calc(50% - var(--ima-traco) * .5) calc(50% + var(--ima-traco) * .5), transparent calc(50% + var(--ima-traco) * .5)),
    linear-gradient(var(--ima-cor), var(--ima-cor)) 50% 28% / 100% var(--ima-traco) no-repeat,
    linear-gradient(var(--ima-cor), var(--ima-cor)) 50% 72% / 100% var(--ima-traco) no-repeat;
  filter: drop-shadow(0 var(--ima-relevo) 0 color-mix(in srgb, var(--ima-cor), var(--tinta) 45%));
}

/* Ponto-cruz: a palavra na grade da Press Start 2P, bordada em X sobre o pano (o JS borda; semente
   fixa, sai igual toda vez). Até 2 palavras. Cor da linha: --ponto-cor. */
.ponto-cruz { --ponto-l: calc(var(--px, var(--px-fora)) * var(--ponto)); display: inline-block; color: var(--ponto-cor, var(--ameixa)); }
.ponto-cruz svg { display: block; width: calc(var(--colunas, 1) * var(--ponto-l)); height: auto; overflow: visible; }
.ponto-cruz path { fill: none; stroke: currentColor; stroke-width: var(--ponto-fio); stroke-linecap: round; }
.ponto-cruz path.ponto-cruz__baixo { opacity: .72; }
/* o pano de prato: trama de tela de bordar (a grade tem o tamanho do ponto) e a faixa colorida */
.pano {
  --ponto-l: calc(var(--px, var(--px-fora)) * var(--ponto));
  background-color: var(--branco);
  background-image:
    linear-gradient(to bottom, transparent calc(var(--ponto-l) * 1.2), var(--pano-faixa, var(--lilas)) 0 calc(var(--ponto-l) * 2.2), transparent 0),
    repeating-linear-gradient(to right, var(--tinta-a08) 0 var(--traco-fino), transparent var(--traco-fino) var(--ponto-l)),
    repeating-linear-gradient(to bottom, var(--tinta-a08) 0 var(--traco-fino), transparent var(--traco-fino) var(--ponto-l));
  box-shadow: var(--sombra-solta);
}

/* Sublinhado por linha: cada linha do título ganha o seu traço (Host ou Fraunces; nunca Spot) */
.linhas {
  text-decoration-line: underline;
  text-decoration-thickness: calc(var(--px, var(--px-fora)) * var(--linhas-traco));
  text-underline-offset: var(--linhas-distancia);
  text-decoration-color: var(--sublinhado);
  text-decoration-skip-ink: none;
}
.ima-letras--sem-tomate > span:nth-child(4) { --ima-cor: var(--rosa-tinta); }   /* a segunda linha da mesma tela */

/* ==========================================================================
   6.11 PEÇAS DE APOIO DOS GANCHOS (iteração 4)
   ========================================================================== */

/* Foto aqui: o lugar marcado da foto que ainda vai ser feita (pauta F1–F8 do PLANO-REDES).
   Nunca vai para o ar: é só para aprovar o layout antes da sessão. */
.foto-aqui {
  display: grid;
  place-items: center;
  align-content: center;
  gap: calc(var(--px, var(--px-fora)) * 14);
  padding: calc(var(--px, var(--px-fora)) * 32);
  border: calc(var(--px, var(--px-fora)) * 6) dashed var(--tinta-a40);
  border-radius: calc(var(--px, var(--px-fora)) * 20);
  background: var(--branco-a50);
  color: var(--tinta-2);
  font-family: var(--letra-texto);
  font-size: calc(var(--px, var(--px-fora)) * 30);
  line-height: var(--lh-ui);
  text-align: center;
}
.foto-aqui .icone { width: calc(var(--px, var(--px-fora)) * 90); height: calc(var(--px, var(--px-fora)) * 90); stroke-width: 1.2; }
.foto-aqui b { display: block; font-family: var(--letra-etiqueta); text-transform: var(--caixa-etiqueta); font-weight: var(--peso-normal); font-size: 1.2em; color: var(--tinta); }

/* Rótulo circulado: o traço de personalidade escrito à mão dentro de uma elipse torta
   (a apresentação "Oi, eu sou…"). A elipse é a mesma tinta da letra. */
.rotulo-circulado {
  display: inline-block;
  padding: .32em .7em .38em;
  border: calc(var(--px, var(--px-fora)) * 4) solid currentColor;
  border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%;
  font-family: var(--letra-mao);
  font-weight: var(--peso-forte);
  line-height: var(--lh-mao);
  color: var(--mao);
  text-align: center;
  transform: rotate(var(--giro, calc(var(--giro-1) * -1)));
}

/* O ovo (o "pouco ovo" do ditado): um só, branco, com sombra de verdade */
.ovo {
  width: calc(var(--px, var(--px-fora)) * 170);
  aspect-ratio: 170 / 220;
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background: radial-gradient(60% 50% at 38% 32%, var(--branco-puro), var(--branco) 60%, var(--papel-2));
  box-shadow: var(--sombra-solta);
}

/* acento montado da Spot: a palavra inteira não quebra no meio (correção de 2026-10-01) */
.palavra-inteira { white-space: nowrap; }

/* ==========================================================================
   6.12 RECEITAS DE CARROSSEL (iteração 5): a partitura e o que atravessa as lâminas
   ========================================================================== */
/* A partitura: o papel de cada lâmina, na cor da folha dela (é sequência de verdade, por isso numerada) */
.partitura {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--e-9) - var(--e-3)), 1fr));
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.partitura li {
  display: grid;
  gap: var(--e-0);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-papel);
  box-shadow: var(--sombra-colada);
  font-size: var(--fs-texto-p);
  font-weight: var(--peso-semi);
  line-height: var(--lh-ui);
}
.partitura b { font-family: var(--letra-numero); font-weight: var(--peso-normal); font-size: var(--fs-h3); line-height: 1; }

/* o que atravessa: a faixa de kraft (as metades se encontram na emenda) */
.kraft-emenda {
  height: calc(var(--px, var(--px-fora)) * 90);
  background: var(--textura-kraft), var(--kraft);
  background-size: var(--tam-kraft) var(--tam-kraft), auto;
  box-shadow: var(--sombra-colada);
  transform: rotate(calc(var(--giro-1) * -1));
}

/* Foto em duas cores (a série 12 das referências): sombra e luz em duas cores da casa */
.duotone { filter: var(--filtro-duotone, var(--filtro-duotone-ameixa)); }
.duotone--tinta { --filtro-duotone: var(--filtro-duotone-tinta); }
.duotone--manteiga { --filtro-duotone: var(--filtro-duotone-tinta-manteiga); }

/* ==========================================================================
   6.13 DAS REFERÊNCIAS 12c, 12d e 12e (iteração 6, pedido do Felipe)
   ========================================================================== */
/* A seleção do computador da vó (12c): retângulo tracejado com as quatro alças de canto,
   como no Paint e no Word antigos. Segura o miolo; a cor vem de --selecao-cor. */
.selecao {
  --sel-l: calc(var(--px, var(--px-fora)) * 4);
  --sel-alca: calc(var(--px, var(--px-fora)) * 22);
  position: relative;
  padding: calc(var(--px, var(--px-fora)) * 40) calc(var(--px, var(--px-fora)) * 48);
  border: var(--sel-l) dashed var(--selecao-cor, var(--texto));
  color: var(--texto);
}
.selecao::before {
  content: "";
  position: absolute;
  inset: calc(var(--sel-alca) * -.5 - var(--sel-l) * .5);
  background:
    linear-gradient(var(--selecao-cor, var(--texto)), var(--selecao-cor, var(--texto))) top left / var(--sel-alca) var(--sel-alca) no-repeat,
    linear-gradient(var(--selecao-cor, var(--texto)), var(--selecao-cor, var(--texto))) top right / var(--sel-alca) var(--sel-alca) no-repeat,
    linear-gradient(var(--selecao-cor, var(--texto)), var(--selecao-cor, var(--texto))) bottom left / var(--sel-alca) var(--sel-alca) no-repeat,
    linear-gradient(var(--selecao-cor, var(--texto)), var(--selecao-cor, var(--texto))) bottom right / var(--sel-alca) var(--sel-alca) no-repeat;
  pointer-events: none;
}

/* A estrela da casa: grande no fundo (12e, preenchida, num tom da própria folha ou kraft)
   ou só o contorno (12c). Nunca tomate aqui: o tomate é a estrela de explosão. */
.estrela-fundo, .estrela-contorno { display: block; aspect-ratio: 1; overflow: visible; pointer-events: none; }
.estrela-fundo { fill: var(--estrela-cor, var(--kraft)); }
.estrela-contorno { fill: none; stroke: var(--estrela-cor, var(--texto-2)); stroke-width: var(--traco-forte); }

/* Cartão preso com alfinete (12d): a foto num cartão de borda branca, presa pela ponta.
   O alfinete fica por cima; a foto pode ir em duas cores (.duotone). */
.cartao-preso { position: relative; padding: calc(var(--px, var(--px-fora)) * 16); background: var(--branco); box-shadow: var(--sombra-solta); }
.cartao-preso img { display: block; width: 100%; height: auto; }
.alfinete { position: absolute; z-index: var(--z-alto); width: calc(var(--px, var(--px-fora)) * 300); aspect-ratio: 320 / 110; overflow: visible; filter: drop-shadow(0 var(--e-0) var(--e-1) var(--tinta-a40)); }

/* A tela de erro do computador da vó, inteira (a "tela azul" que virou lilás no Reels da paciência) */
.tela-erro { background: var(--lilas-tinta); color: var(--branco); font-family: var(--letra-tela); }
.tela-erro__rotulo { display: inline-block; padding: 0 calc(var(--px, var(--px-fora)) * 18); background: var(--branco); color: var(--lilas-tinta); }