/*
 * VM Contabilidade · camada de cinema (v3, 12/10/2026). A rolagem é o tempo do filme (decupagem.md): a abertura
 * (o nó, a palavra da parede, a sede, os papéis) e a mesa dos casos. Detalhes das artes da VM: grifo de seleção,
 * etiqueta inclinada, fita vinho na lateral, bilhete de papel, cabeçalho em Georgia espaçada.
 * .cine = com movimento; .reduz = quem pede menos movimento (só troca por opacidade); sem .js = tudo empilhado.
 */
:root { --ease-io: cubic-bezier(.77, 0, .175, 1); --ease-expo: cubic-bezier(.16, 1, .3, 1); --grifo: rgba(157, 28, 59, .17); }

/* ------------------------------------------------------------ detalhes das artes */
/* o cabeçalho das artes: CONTABILIDADE VALDIRENE MOURÃO, em Georgia espaçada (substitui o selo em pílula) */
.selo { padding: 0 0 0 .34em; border-radius: 0; background: none; font: 400 12px/1.4 var(--serif); letter-spacing: .34em; text-transform: uppercase; color: var(--g3); }
.selo--claro { background: none; color: rgba(245, 243, 239, .86); }

/* o grifo de seleção: fundo vinho claro atrás das palavras e as duas alças com bolinha (como selecionar texto no celular) */
.grifo { --h: var(--vinho); padding: .03em .05em; margin: 0 -.05em; color: inherit;
  background: linear-gradient(var(--grifo), var(--grifo)) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
  transition: background-size 1.1s var(--ease-io) .25s; }
.grifo::before, .grifo::after { content: ''; display: inline-block; width: 10px; margin: 0 -5px; height: calc(1.16em + 9px); pointer-events: none;
  transition: opacity .3s ease, transform .55s var(--ease-expo); }
.grifo::before { vertical-align: -.27em; transform-origin: 50% 100%;
  background: radial-gradient(circle at 50% 4.5px, var(--h) 4px, transparent 4.7px), linear-gradient(var(--h), var(--h)) no-repeat 50% 100% / 2px calc(100% - 6px); }
.grifo::after { vertical-align: calc(-.27em - 9px); transform-origin: 50% 0; transition-delay: 1.2s;
  background: radial-gradient(circle at 50% calc(100% - 4.5px), var(--h) 4px, transparent 4.7px), linear-gradient(var(--h), var(--h)) no-repeat 50% 0 / 2px calc(100% - 6px); }
.grifo--foto { --grifo: rgba(157, 28, 59, .8); --h: var(--vinho); color: var(--creme); }
.cine .grifo:not(.on), .reduz .grifo:not(.on) { background-size: 0% 100%; transition-duration: .3s; transition-delay: 0s; }
.cine .grifo:not(.on)::before, .cine .grifo:not(.on)::after, .reduz .grifo:not(.on)::before, .reduz .grifo:not(.on)::after { opacity: 0; transform: scaleY(.4); transition-delay: 0s; }

/* a etiqueta cai torta no lugar */
.cine .et--torta { transition: transform 1s var(--ease-expo), opacity .45s ease; }
.cine .et--torta:not(.on) { opacity: 0; transform: rotate(-10deg) translateY(.3em) scale(.86); }

/* a fita vinho da lateral das artes, com o nome correndo */
.fita { position: absolute; top: -4%; bottom: -4%; right: -10px; z-index: 3; width: 40px; overflow: hidden; background: var(--vinho); color: var(--creme);
  transform: rotate(.2deg); box-shadow: -10px 0 24px -16px rgba(72, 54, 38, .6); pointer-events: none; }
.fita--esq { right: auto; left: -10px; transform: rotate(-.3deg); }
.fita p { white-space: nowrap; writing-mode: vertical-rl; font: 500 13px/40px var(--sans); letter-spacing: .05em; padding-right: 2px;
  transform: rotate(180deg) translateY(calc(var(--fy, 0) * 1px)); }
.fita--esq p { padding: 0 0 0 2px; }
.faz, .avisos { position: relative; overflow-x: clip; }

/* o grão por cima de tudo, vivo */
.grao { position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .07; background: url(../img/grao-0.png); mix-blend-mode: multiply; }
.cine .grao { animation: grao 1s steps(1) infinite; }
@keyframes grao { 0% { transform: translate(0, 0); } 12% { transform: translate(-7%, 4%); } 25% { transform: translate(5%, -6%); } 37% { transform: translate(-3%, 8%); }
  50% { transform: translate(8%, 2%); } 62% { transform: translate(-6%, -5%); } 75% { transform: translate(3%, 7%); } 87% { transform: translate(-8%, -2%); } }

/* ------------------------------------------------------------ peças de câmera */
/* uma foto do Flow em duas camadas, cobrindo a tela sem mudar a proporção (o objeto encaixa pela caixa em %) */
.foto3d { position: absolute; left: 50%; top: 50%; width: max(100%, 133.9svh); aspect-ratio: 1920 / 1434; transform: translate(-50%, -50%); }
.foto3d img { position: absolute; display: block; max-width: none; }
.foto3d__chao { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto3d__obj { height: auto; will-change: transform; }
.vaza { position: absolute; inset: -20%; z-index: 20; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(38% 30% at 50% 50%, rgba(241, 191, 118, .9), rgba(207, 143, 69, .35) 45%, transparent 72%); }
.risco { position: absolute; left: -30%; right: -30%; top: 50%; z-index: 21; height: 3px; margin-top: -1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 205, .2) 30%, rgba(255, 246, 232, .95) 50%, rgba(255, 236, 205, .2) 70%, transparent);
  box-shadow: 0 0 22px 5px rgba(241, 191, 118, .55); }

/* ------------------------------------------------------------ 1. o filme da abertura */
.filme { position: relative; background: var(--papel); }
.filme__fixo { position: relative; }
.js .filme { height: 660vh; height: 660svh; }
.cine .filme { height: 720vh; height: 720svh; }
.js .filme__fixo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #EADFD3; }
.plano { position: absolute; inset: 0; overflow: hidden; }
.plano--sede img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; will-change: transform; }
.plano__veu { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 0% 100%, rgba(72, 54, 38, .7), transparent 70%), linear-gradient(100deg, rgba(92, 64, 40, .82) 0%, rgba(100, 66, 36, .5) 42%, rgba(111, 69, 35, .12) 75%, transparent 100%); }
.plano__luz { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 55% at 58% 42%, rgba(243, 229, 219, .1), transparent 70%), radial-gradient(55% 60% at 0% 100%, rgba(207, 143, 69, .45), transparent 70%),
    linear-gradient(100deg, rgba(110, 78, 50, .9) 0%, rgba(111, 69, 35, .55) 45%, rgba(72, 54, 38, .7) 100%); }
.plano--sede .grade { opacity: 0; }
.plano--no { background: #EADFD3; }
.camera { position: absolute; inset: 0; will-change: transform; }
.foto3d--no { top: 66%; }
/* o nó desatando (vídeo do Flow em quadros, um por passo da rolagem): entra no lugar das duas camadas quando carrega */
.foto3d__filme { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s ease; }
.foto3d--no.filme-on .foto3d__filme { opacity: 1; }
.foto3d--no.filme-on .foto3d__chao, .foto3d--no.filme-on .foto3d__obj { visibility: hidden; }
.gigante .et { text-transform: none; }
.plano__ceu { position: absolute; inset: 0 0 auto 0; height: 46%; pointer-events: none; background: linear-gradient(#EADFD3 0, rgba(234, 223, 211, .86) 40%, transparent); }

/* a parede: papel com a palavra vazada (a sede aparece por dentro das letras) */
.parede { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.parede__metade { position: absolute; inset: 0; will-change: transform; }
.parede__corte { position: absolute; inset: 0; }
.parede__metade--cima .parede__corte { clip-path: inset(0 0 50% 0); }
.parede__metade--baixo .parede__corte { clip-path: inset(50% 0 0 0); }
.parede__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.parede__papel { fill: var(--papel); }
.parede__palavra { font-family: var(--sans); font-weight: 700; font-size: min(15.4vw, 34svh); letter-spacing: -.045em; text-anchor: middle; dominant-baseline: central; fill: #000; }
.parede__borda { position: absolute; left: 0; right: 0; height: 60px; pointer-events: none; opacity: 0; }
.parede__metade--cima .parede__borda { top: calc(50% - 60px); background: linear-gradient(transparent, rgba(110, 78, 50, .22)); }
.parede__metade--baixo .parede__borda { top: 50%; background: linear-gradient(rgba(110, 78, 50, .22), transparent); }
.parede__sobre { position: absolute; left: 0; right: 0; top: calc(50% - min(15.4vw, 34svh) * .5 - 64px); text-align: center; font-size: clamp(17px, 1.6vw, 23px); font-weight: 500; letter-spacing: -.01em; color: var(--grafite); opacity: 0; }

/* o primeiro plano: o título que a câmera atravessa */
.frente { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; padding: calc(var(--topo) + 5vh) var(--pad) 0; text-align: center; color: var(--grafite); will-change: transform, opacity, filter; }
.frente__t { margin-top: clamp(18px, 3vh, 34px); font-size: clamp(54px, 8.6vw, 136px); line-height: .84; }
.frente__dica { position: absolute; right: calc(var(--pad) + 1vw); bottom: 30px; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--grafite); }
.frente__dica i { width: 1px; height: 38px; background: rgba(72, 69, 62, .25); overflow: hidden; position: relative; }
.frente__dica i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--vinho); animation: desce 1.8s var(--ease-io) infinite; }
@keyframes desce { to { top: 100%; } }

/* a outra frase da parede, por cima da sede */
.frase { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; padding: calc(var(--topo) + 20px) calc(var(--pad) + 4vw) 60px;
  color: var(--creme); opacity: 0; pointer-events: none; }
.frase.vivo { pointer-events: auto; }
.frase__t { margin-top: 26px; font-size: clamp(44px, 7.4vw, 116px); line-height: .9; }
.frase__t .grifo { display: inline-block; margin-top: .12em; font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -.02em; line-height: 1.02; }
.frase__sub { margin-top: 34px; max-width: 34em; font-size: 17.5px; line-height: 1.5; color: rgba(245, 243, 239, .94); }
.frase .pilula { margin-top: 28px; }

/* os papéis por cima da sede */
.lidando { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; color: var(--creme); opacity: 0; pointer-events: none; }
.lidando.vivo { pointer-events: auto; }
.lidando__titulo { position: relative; max-width: 13em; text-align: center; font-size: clamp(46px, 7.3vw, 108px); line-height: .9; }
.papeis { position: absolute; inset: 0; pointer-events: none; }
.lidando.vivo .papel { pointer-events: auto; }
.papel { pointer-events: none; }
.papel__x .grifo { color: var(--grafite); }
.lidando__dica { position: absolute; right: calc(var(--pad) + 2vw); bottom: 40px; max-width: 210px; font-size: 14px; line-height: 1.45; color: rgba(245, 243, 239, .92); }
.lidando__dica svg { display: block; width: 28px; height: 28px; margin-bottom: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* sem js: a abertura vira páginas empilhadas */
html:not(.js) .filme__fixo > .plano, html:not(.js) .parede, html:not(.js) .vaza, html:not(.js) .risco { display: none; }
html:not(.js) .frente, html:not(.js) .frase, html:not(.js) .lidando { position: relative; min-height: 100vh; opacity: 1; background: var(--taupe); }
html:not(.js) .frente { background: #EADFD3; }

/* ------------------------------------------------------------ 6. a mesa dos casos */
.mesa { position: relative; background: linear-gradient(#F3E8DE, #E9DACB); }
.js .mesa { height: 800vh; height: 800svh; }
.cine .mesa { height: 850vh; height: 850svh; }
.mesa__fixo { position: relative; }
.js .mesa__fixo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.mesa__fixo::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 30% 30%, rgba(252, 245, 241, .8), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(207, 143, 69, .16), transparent 70%); }
.mesa__cab { position: absolute; left: calc(var(--pad) + 4vw); top: calc(var(--topo) + 7vh); z-index: 4; display: grid; justify-items: start; gap: 22px; max-width: 34em; will-change: transform, opacity; }
.mesa__cab > p:last-child { max-width: 24em; font-size: 16px; color: var(--g2); }
.mesa__mundo { position: absolute; inset: 0; perspective: 1300px; perspective-origin: 36% 50%; }
.mesa__trilho { position: absolute; left: 36%; top: 52%; transform-style: preserve-3d; will-change: transform; }
.quadro { position: absolute; width: var(--qw, 640px); aspect-ratio: 1920 / 1434; margin: calc(var(--qw, 640px) * -.3734) 0 0 calc(var(--qw, 640px) * -.5);
  border-radius: 12px; overflow: hidden; background: var(--chao); box-shadow: 0 70px 90px -50px rgba(72, 54, 38, .6), 0 2px 8px rgba(72, 54, 38, .12); will-change: transform, filter, opacity; backface-visibility: hidden; }
.quadro__dentro { position: absolute; inset: -4%; }
.quadro__dentro .foto3d__chao, .quadro__dentro .foto3d__obj { will-change: transform; }
.quadro__dentro .foto3d { width: 100%; top: 50%; }
.quadro__dentro .foto3d__chao { transform: translateX(calc(var(--d, 0) * 10px)); }
.quadro__dentro .foto3d__obj { transform: translateX(calc(var(--d, 0) * 30px)); }
/* cada objeto se mexe quando entra em foco (--t vai de 0 a 1) */
.q--carteira .foto3d__obj { transform: translate(calc(var(--d, 0) * 30px), calc((1 - var(--t, 0)) * -9%)) rotate(calc((1 - var(--t, 0)) * -2deg)); }
.q--no .foto3d__obj { transform: translateX(calc(var(--d, 0) * 30px)) scale(calc(.93 + var(--t, 0) * .07)) rotate(calc((1 - var(--t, 0)) * -5deg)); }
.q--moeda .foto3d__obj { transform: translateX(calc(var(--d, 0) * 30px + var(--t, 0) * 22.6% - 12%)); }
.q--moeda .foto3d__obj + .foto3d__obj { transform: translateX(calc(var(--d, 0) * 30px - var(--t, 0) * 22.6% + 12%)); }
.q--xadrez .foto3d__chao { filter: blur(calc(var(--t, 0) * 4px)); transform: translateX(calc(var(--d, 0) * 10px)) scale(1.02); }
.q--xadrez .foto3d__obj { transform-origin: 50% 100%; transform: translateX(calc(var(--d, 0) * 30px)) scale(calc(.97 + var(--t, 0) * .06)); }
.q--chave .foto3d__obj { transform-origin: 12% 40%; transform: translateX(calc(var(--d, 0) * 30px + (1 - var(--t, 0)) * 7%)) rotate(calc((1 - var(--t, 0)) * -16deg)); }
.q--envelope .foto3d__obj { transform: translate(calc(var(--d, 0) * 30px + (1 - var(--t, 0)) * 16%), calc((1 - var(--t, 0)) * -14%)) rotate(calc((1 - var(--t, 0)) * 8deg)); }
.q--ampulheta .foto3d__obj { transform: translateX(calc(var(--d, 0) * 30px)); }
/* a areia que cai pelo gargalo (o fio existe na foto; este anda) */
.areia { position: absolute; left: 49.86%; top: 48.6%; width: .26%; height: 13.6%; opacity: calc(var(--t, 0) * .9); pointer-events: none;
  background: repeating-linear-gradient(rgba(214, 170, 92, 0) 0 5px, rgba(232, 196, 120, .95) 5px 7px, rgba(214, 170, 92, 0) 7px 11px, rgba(196, 150, 80, .8) 11px 12px);
  background-size: 100% 24px; animation: areia .5s linear infinite; transform: translateX(calc(var(--d, 0) * 30px)); }
@keyframes areia { to { background-position: 0 24px; } }

/* o texto do caso fica num bilhete de papel pousado sobre a fila (o bilhete inclinado das artes) */
.mesa__textos { position: absolute; left: 61%; right: calc(var(--pad) + 2.4vw); top: 50%; z-index: 4; height: min(540px, 66svh); transform: translateY(-48%) rotate(-.8deg);
  background: var(--elevada); box-shadow: 0 50px 80px -40px rgba(72, 54, 38, .55), 0 2px 6px rgba(72, 54, 38, .1); transition: opacity .5s ease; }
.mesa__textos.fora { opacity: 0; }
.mesa__textos::after { content: '”'; position: absolute; right: 26px; top: 6px; font: 400 120px/1 var(--serif); color: var(--ouro3); opacity: .6; pointer-events: none; }
.caso { position: absolute; inset: 0; padding: clamp(28px, 2.6vw, 40px); display: flex; flex-direction: column; align-items: flex-start; justify-items: start; gap: 0; opacity: 0; transform: translateY(30px); pointer-events: none;
  transition: opacity .5s ease, transform .9s var(--ease-expo); }
.caso.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
.caso__num { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--vinho); }
.caso h3 { margin-top: 16px; font-size: clamp(32px, 3.3vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.caso h3 em { font-family: var(--serif); font-weight: 400; font-style: normal; color: var(--vinho); }
.caso__texto { margin-top: 20px; max-width: 30em; font-size: 16px; line-height: 1.55; color: var(--g2); }
/* a caixa branca de título das artes ("O que é?", "Sinais de alerta") */
.caso__chip { margin-top: 22px; display: grid; gap: 2px; padding: 12px 16px 13px; background: var(--elevada); box-shadow: 0 18px 30px -18px rgba(72, 54, 38, .55), 0 0 0 1px rgba(72, 54, 38, .06); transform: rotate(-1deg); }
.caso__chip small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g3); }
.caso__chip b { font-size: 17px; font-weight: 700; color: var(--grafite); }
.caso .pilula { margin-top: auto; }
.caso__chip { margin-bottom: 24px; }
.mesa__conta { position: absolute; left: calc(var(--pad) + 4vw); bottom: 34px; z-index: 4; display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 700; color: var(--g2); opacity: 0; transition: opacity .4s ease; }
.mesa__conta b { font-size: 34px; letter-spacing: -.03em; color: var(--grafite); }
.mesa__conta.on { opacity: 1; }

/* a última parada: a mão aberta ocupa a tela */
.mesa__fim { position: absolute; inset: 0; z-index: 8; pointer-events: none; visibility: hidden; }
.mesa__fim.vivo { visibility: visible; }
.mesa__fim.pronto { pointer-events: auto; }
.mesa__fim-foto { position: absolute; inset: 0; overflow: hidden; background: #E7D9CB; }
.mesa__fim-foto .foto3d { will-change: transform; }
.foto3d--mao { top: 64%; }
.mesa__fim-veu { position: absolute; inset: 0; background: linear-gradient(rgba(234, 223, 211, .92) 0, rgba(234, 223, 211, .55) 34%, transparent 58%); }
.mesa__fim-texto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(var(--topo) + 6vh) var(--pad) 0; text-align: center; opacity: 0; }
.mesa__fim-texto p { margin-top: 26px; max-width: 32em; font-size: 17px; color: var(--g2); }
.mesa__fim-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.vaza--mesa { z-index: 9; }

/* sem js ou com menos movimento: a mesa vira lista */
.mesa--lista .mesa__fixo { height: auto; position: relative; overflow: visible; padding: clamp(110px, 12vw, 170px) calc(var(--pad) + 4vw) 80px; }
.mesa--lista { height: auto !important; }
.mesa--lista .mesa__cab, .mesa--lista .mesa__textos, .mesa--lista .mesa__fim, .mesa--lista .mesa__fim-texto { position: relative; inset: auto; left: auto; top: auto; transform: none; visibility: visible; opacity: 1; }
.mesa--lista .mesa__mundo, .mesa--lista .mesa__conta, .mesa--lista .mesa__fim-foto, .mesa--lista .vaza { display: none; }
.mesa--lista .mesa__textos { right: auto; height: auto; display: grid; gap: 56px; margin-top: 60px; background: none; box-shadow: none; }
.mesa--lista .mesa__textos::after { display: none; }
.mesa--lista .caso { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.mesa--lista .caso__foto { display: block; width: min(560px, 100%); margin-bottom: 22px; border-radius: 12px; }
.caso__foto { display: none; }
.mesa--lista .mesa__fim-texto { padding: 90px 0 0; }

/* ------------------------------------------------------------ topo sobre a abertura clara */
.topo.tinta .topo__logo--foto { opacity: 0; } .topo.tinta .topo__logo--claro { opacity: 1; }
.topo.tinta .topo__nav a { color: var(--grafite); }
.topo.tinta .pilula--topo { background: var(--vinho); color: var(--creme); }

/* ------------------------------------------------------------ celular */
@media (max-width: 820px) {
  .foto3d--no { width: 150vw; top: auto; bottom: 4svh; transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(transparent 0, #000 18%, #000 84%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 18%, #000 84%, transparent 100%); }
  .plano__ceu { height: 58%; background: linear-gradient(#EADFD3 0, #EADFD3 52%, rgba(234, 223, 211, .7) 74%, transparent); }
  .frente { padding-top: calc(var(--topo) + 4vh); }
  .frente .selo { font-size: 10.5px; letter-spacing: .24em; }
  .papel { width: 78vw; }
  .frente__t { font-size: clamp(42px, 12.6vw, 72px); }
  .frente__dica { left: 0; right: 0; justify-content: center; bottom: 22px; }
  .parede__palavra { font-size: 15.6vw; }
  .parede__sobre { top: calc(50% - 15.6vw * .5 - 54px); padding: 0 var(--pad); font-size: 16px; }
  .frase { padding: calc(var(--topo) + 20px) var(--pad) 50px; justify-content: flex-end; }
  .frase__t { font-size: clamp(36px, 11vw, 64px); }
  .frase__sub { font-size: 16px; margin-top: 22px; }
  .plano__veu { background: linear-gradient(transparent 20%, rgba(72, 54, 38, .55) 55%, rgba(72, 54, 38, .86)); }
  .lidando__titulo { font-size: clamp(34px, 10.4vw, 64px); padding: 0 var(--pad); }
  .lidando__dica { position: absolute; left: var(--pad); right: var(--pad); bottom: 18px; max-width: none; text-align: center; font-size: 13px; }
  .lidando__dica svg { display: none; }
  .mesa__cab { left: var(--pad); right: var(--pad); top: calc(var(--topo) + 4vh); }
  .mesa__mundo { perspective: 900px; perspective-origin: 50% 30%; }
  .mesa__trilho { left: 50%; top: 31%; }
  .mesa__textos { left: var(--pad); right: var(--pad); top: auto; bottom: 18px; transform: rotate(-.6deg); height: 50%; }
  .mesa__textos::after { font-size: 84px; right: 16px; }
  .caso { padding: 20px 20px 18px; }
  .caso h3 { margin-top: 10px; font-size: clamp(26px, 7.6vw, 38px); }
  .caso__texto { margin-top: 12px; font-size: 14.5px; line-height: 1.5; }
  .caso__chip { display: none; }
  .caso .pilula { margin-top: auto; min-height: 40px; }
  .caso__chip { margin-bottom: 0; }
  .mesa__conta { left: auto; right: var(--pad); top: calc(var(--topo) + 10px); bottom: auto; }
  .mesa__conta b { font-size: 26px; }
  .foto3d--mao { width: 150vw; top: 70%; }
  .mesa__fim-veu { background: linear-gradient(rgba(234, 223, 211, .95) 0, rgba(234, 223, 211, .7) 46%, transparent 70%); }
  .fita { width: 26px; right: -8px; }
  .fita--esq { left: -8px; }
  .fita p { font-size: 11px; line-height: 26px; }
  .numeros__itens { padding: 0 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .grao { animation: none; }
  .areia { animation: none; }
}

/* ------------------------------------------------------------ o cursor é a alça do grifo (só com mouse) */
::selection { background: rgba(157, 28, 59, .2); color: var(--grafite); }
.grifo--foto::selection, .frase ::selection, .fala ::selection, .contato ::selection { background: rgba(157, 28, 59, .75); color: var(--creme); }
.cursor { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; opacity: 0; transition: opacity .25s ease; will-change: transform; }
.cursor i { position: absolute; left: 0; top: 0; display: block; transition: width .35s var(--ease-expo), height .35s var(--ease-expo), border-radius .35s var(--ease-expo), background .25s ease, transform .35s var(--ease-expo), border-color .25s ease; }
/* o ponto */
.cursor i { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--vinho); border: 1.5px solid transparent; }
/* em cima de texto: a alça de seleção (linha vinho com a bolinha no alto) */
.cursor.texto i { width: 2px; height: 28px; margin: -14px 0 0 -1px; border-radius: 1px; }
.cursor.texto i::before { content: ''; position: absolute; left: -4px; top: -8px; width: 10px; height: 10px; border-radius: 50%; background: var(--vinho); }
/* em cima de link: um anel que abraça o botão */
.cursor.link i { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: transparent; border-color: var(--vinho); }
.cursor.claro i, .cursor.claro i::before { background: var(--creme); }
.cursor.claro.link i { background: transparent; border-color: var(--creme); }
.cine.mouse .cursor.on { opacity: 1; }
.cine.mouse body, .cine.mouse a, .cine.mouse button, .cine.mouse summary { cursor: none; }
.cine.mouse input, .cine.mouse textarea, .cine.mouse label { cursor: auto; }
.cine.mouse .papel { cursor: grab; }

/* ------------------------------------------------------------ a cortina: a seção seguinte sobe como uma folha de papel por cima da cena */
.cine .faz, .cine .processo { position: relative; z-index: 2; margin-top: -60vh; margin-top: -60svh; border-radius: 34px 34px 0 0; box-shadow: 0 -40px 80px -40px rgba(72, 54, 38, .5); }
.cine .faz::before, .cine .processo::before { content: ''; position: absolute; left: 50%; top: 14px; width: 54px; height: 4px; margin-left: -27px; border-radius: 4px; background: rgba(72, 54, 38, .14); }
@media (max-width: 820px) { .cine .faz, .cine .processo { border-radius: 24px 24px 0 0; } }