/* base comum às 3 direções: hero intacto, página de ponta a ponta, espaço em escala de largura */
:root { --b: clamp(120px, 28vw, 600px); --margem: clamp(20px, 5vw, 56px); --largura: 1168px; --respiro: clamp(96px, 13vw, 192px); --cab: clamp(44px, 6vw, 88px); --grupo: clamp(40px, 5.5vw, 80px); --lado: max(var(--margem), calc((100% - var(--largura)) / 2)); }
.home .palco { max-width: none; padding: 0; display: block; min-height: 0; overflow-x: clip; }
.home .topo, .home .heroi { padding-inline: var(--lado); }
.home .topo { padding-top: 32px; }
.home .heroi { padding-bottom: clamp(72px, 9vw, 128px); }
.home .pe { padding: 0; }
.home h2 { margin: 0; font: 400 clamp(38px, 4.6vw, 66px)/1.05 'DM Serif Display', Georgia, serif; letter-spacing: -.008em; color: var(--forte); text-wrap: balance; }
.etiqueta { margin: 0 0 14px; font: italic 400 23px/1.2 'DM Serif Display', Georgia, serif; color: var(--tinta); }
.acao { position: relative; color: var(--tinta); white-space: nowrap; }
.acao.quebra { white-space: normal; }
.acao.custo-cor { color: var(--erro); }
.traco { position: absolute; left: 0; right: 0; bottom: -.14em; width: 100%; height: .22em; overflow: visible; color: inherit; opacity: .5; }
.borda { position: absolute; left: 0; width: 100%; height: var(--b); object-fit: fill; pointer-events: none; }
.borda.vira { top: -1px; transform: scaleY(-1); }
.repete { display: inline-block; padding: 18px 28px; border-radius: 16px; background: var(--tinta); color: #fff; font-weight: 600; font-size: 18px; text-decoration: none; box-shadow: 0 6px 18px -8px rgba(35,48,122,.55); transition: transform .35s var(--mola), background .2s; }
.repete:hover { background: #1B2763; transform: translateY(-1px); }
/* pílulas de resposta do app: um significado por cor */
.resp { display: inline-block; padding: 5px 12px; border-radius: 10px; font-weight: 600; font-size: 15px; line-height: 1.3; background: #EEF0F3; color: var(--texto); }
@media (max-width: 899px) {
  .acao { white-space: normal; }
  .repete { display: block; text-align: center; }
}
/* Híbrida: o Radar anda sobre o mapa, cidade até o bairro; a aquarela entra e o resto é o caderno. Ordem aprovada das seções. */
.home .heroi { padding-bottom: clamp(32px, 4vw, 56px); }
.apoio-c { margin: 22px 0 0; font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--texto); }
.rv { transition: opacity .8s var(--suave), transform .8s var(--suave); }
.js-on .rv:not(.is-in) { opacity: 0; transform: translateY(16px); }
.m { position: relative; }
.m-fixo { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.m-area { position: absolute; top: 0; bottom: 0; left: 0; width: 62%; }
.mm { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mm-g { transition: transform 1.1s var(--suave); transform-origin: 0 0; }
.mm path { vector-effect: non-scaling-stroke; transition: fill .6s var(--suave), stroke .6s var(--suave), opacity .6s var(--suave); }
.mm-dots { transition: opacity .5s var(--suave); }
.mm-dots circle { vector-effect: non-scaling-stroke; }
.m-chips { position: absolute; inset: 0; pointer-events: none; }
.m-chip { position: absolute; width: 0; height: 0; animation: pousa .5s var(--suave) both; }
.m-chip::before { content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px var(--forte); }
.m-chip p { position: absolute; left: 15px; top: 0; transform: translateY(-50%); margin: 0; padding: 8px 12px 9px; background: var(--cartao); border-radius: 14px; box-shadow: 0 2px 4px rgba(20,24,31,.08), 0 10px 24px -10px rgba(20,24,31,.28); white-space: nowrap; }
.m-chip.esq p { left: auto; right: 15px; }
.m-chip b { display: block; font-weight: 600; font-size: 20px; line-height: 1.1; color: var(--forte); font-variant-numeric: tabular-nums; }
.m-chip span { display: block; margin-top: 2px; font-weight: 500; font-size: 14.5px; line-height: 1.15; color: var(--texto); }
/* a ficha do bairro: pousa no mapa quando a escala chega ao bairro */
.m-nome { position: absolute; transform: translate(-50%, -50%); font: italic 400 19px/1.1 'DM Serif Display', Georgia, serif; color: #C9D2EE; white-space: nowrap; animation: nomeEntra .5s var(--suave) both .45s; }
@keyframes nomeEntra { from { opacity: 0; } to { opacity: 1; } }
.m-ficha { z-index: 3; position: absolute; left: 50%; top: 50%; width: 310px; margin: 0; padding: 24px 26px; background: var(--cartao); border-radius: 22px; box-shadow: 0 2px 4px rgba(20,24,31,.08), 0 24px 50px -22px rgba(20,24,31,.4); transform: translate(36px, -50%); opacity: 0; visibility: hidden; transition: opacity .5s var(--suave), visibility .5s; }
.m[data-cena="bairro"] .m-ficha { opacity: 1; visibility: visible; }
.m-ficha p { margin: 0; }
.m-ficha-nome { font: 400 28px/1.1 'DM Serif Display', Georgia, serif; color: var(--forte); }
.m-ficha-v { margin: 6px 0 14px !important; font-weight: 600; font-size: 40px; line-height: 1.05; color: var(--tinta); font-variant-numeric: tabular-nums; }
.m-ficha-v small { font-size: 18px; font-weight: 500; color: var(--apoio); }
.m-ficha-l { padding: 9px 0; border-top: 1px solid rgba(20,24,31,.08); font-size: 16px; line-height: 1.35; }
.m-ficha-l b { color: var(--forte); font-weight: 600; }
/* anéis do endereço: distâncias reais, sem direção geográfica */
/* o texto corre por cima do palco, na coluna esquerda */
.m-passos { position: relative; z-index: 2; margin-top: -100svh; padding-inline: var(--lado); pointer-events: none; }
.m .acao { white-space: normal; }
.m-passo { display: flex; align-items: center; width: min(36%, 460px); margin-left: auto; min-width: 330px; min-height: 76svh; pointer-events: auto; color: var(--texto); transition: color .5s var(--suave); }
.m-passo.primeiro { min-height: 100svh; }
.m-passo:last-child { min-height: 100svh; }
.m-passo h2 { margin-bottom: 26px; }
.m-apoio { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.5; }
.m-item { margin: 0 0 18px; font-weight: 500; font-size: 21px; line-height: 1.45; }
.m-item strong { display: block; font-weight: 600; font-size: 25px; line-height: 1.25; color: var(--forte); transition: color .5s var(--suave); }
.m-nota { margin: 20px 0 0; font-size: 15px; line-height: 1.45; color: var(--apoio); transition: color .5s var(--suave); }
.m .etiqueta, .m .acao, .m h2, .m h3 { transition: color .5s var(--suave); }
/* depois do hero a aquarela desce e o Radar inteiro acontece sobre a tinta, até o caderno */
.m { margin-top: calc(var(--b) * .92); background: var(--tinta); }
.m > .borda { top: calc(-1 * var(--b) + 1px); }
/* o mapa se dissolve na tinta embaixo, como no hero; sem isto, a saída para o caderno vira uma linha reta */
.m-fixo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26svh; background: linear-gradient(to bottom, rgba(35,48,122,0), var(--tinta)); pointer-events: none; }
.m .mm path { stroke: rgba(227,231,247,.28); }
.m .m-passo { color: #E3E7F7; }
.m :is(h2, .m-item strong) { color: #fff; }
.m :is(.etiqueta, .acao, .m-nota) { color: #C9D2EE; }
.m .mm-dots circle[fill="#23307A"] { fill: #fff; stroke: var(--tinta); }
.m .mm-dots circle[fill="#fff"] { fill: var(--tinta); stroke: #fff; }
.m .mm .mm-contorno, .m .mm .mm-realce { stroke: #fff; }
/* due diligence: o caderno aberto sobre a tinta */
.k2 { position: relative; z-index: 4; padding: clamp(64px, 8vw, 112px) var(--lado) clamp(80px, 9vw, 130px); background: var(--tinta); }
.caderno { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--papel); border-radius: 10px 10px 14px 14px; box-shadow: 0 2px 2px rgba(0,0,0,.2), 0 8px 0 -2px #E9E7DF, 0 12px 0 -4px #DDDBD2, 0 40px 80px -30px rgba(0,0,0,.65); }
.caderno::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 72px; transform: translateX(-50%); background: linear-gradient(to right, transparent, rgba(35,48,122,.1) 48%, rgba(35,48,122,.16) 50%, rgba(35,48,122,.1) 52%, transparent); pointer-events: none; }
.pag { padding: clamp(32px, 5vw, 72px); min-width: 0; }
.pag.esq { position: relative; }
.pag-arte { display: block; width: min(68%, 300px); height: auto; margin: 28px auto -16px; mix-blend-mode: multiply; }
.pag.dir { list-style: none; counter-reset: q; margin: 0; background: var(--papel); border-radius: 0 10px 14px 0; font-size: 17.5px; line-height: 1.45; color: var(--texto); }
.pag.dir li { position: relative; counter-increment: q; padding: 15px 0 15px 42px; background: repeating-linear-gradient(to bottom, transparent 0 calc(100% - 1px), rgba(35,48,122,.16) calc(100% - 1px) 100%); }
.pag.dir li::before { content: counter(q); position: absolute; left: 0; top: 11px; font: italic 400 30px/1.2 'DM Serif Display', Georgia, serif; color: var(--tinta); }
.pag.dir strong { display: block; font-weight: 600; font-size: 20px; color: var(--forte); }
/* custo: a conta numa fita */
.k3 { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 104px); align-items: center; padding: calc(var(--b) + clamp(30px, 4vw, 60px)) var(--lado) calc(var(--b) + clamp(40px, 5vw, 72px)); background: var(--papel); }
.k3 h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1.03; }
.k3-fecho { margin: 28px 0 28px; font-weight: 500; font-size: 20px; color: var(--texto); }
.fita { list-style: none; margin: 0; padding: 34px 34px 46px; background: var(--cartao); font-size: 17.5px; line-height: 1.45; color: var(--texto); clip-path: polygon(0 0, 100% 0, 100% 98%, 97% 100%, 94% 98.6%, 91% 100%, 88% 98.6%, 85% 100%, 82% 98.6%, 79% 100%, 76% 98.6%, 73% 100%, 70% 98.6%, 67% 100%, 64% 98.6%, 61% 100%, 58% 98.6%, 55% 100%, 52% 98.6%, 49% 100%, 46% 98.6%, 43% 100%, 40% 98.6%, 37% 100%, 34% 98.6%, 31% 100%, 28% 98.6%, 25% 100%, 22% 98.6%, 19% 100%, 16% 98.6%, 13% 100%, 10% 98.6%, 7% 100%, 4% 98.6%, 0 100%); }
.fita-s { filter: drop-shadow(0 2px 2px rgba(20,24,31,.06)) drop-shadow(0 18px 26px rgba(20,24,31,.16)); }
.fita li { padding: 22px 0; border-bottom: 2px dashed rgba(20,24,31,.14); }
.fita li:last-child { border-bottom: 0; }
.fita li:first-child { padding-top: 0; }
.fita strong { display: block; margin-bottom: 4px; font-weight: 600; font-size: clamp(40px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -.02em; color: var(--erro); font-variant-numeric: tabular-nums; }
.fita .pal strong { font: 400 28px/1.15 'DM Serif Display', Georgia, serif; letter-spacing: 0; color: var(--forte); }
/* raio-x: a trena, com as distâncias reais do endereço */
.k4 { position: relative; padding: clamp(40px, 5vw, 72px) var(--lado) clamp(80px, 9vw, 130px); background: var(--tinta-clara); }
.k4 .borda { top: calc(-1 * var(--b) + 1px); }
.k4-topo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.k4-arte { width: 100%; max-width: 500px; height: auto; mix-blend-mode: multiply; }
.k4-itens { list-style: none; margin: 26px 0 0; padding: 0; font-size: 18px; line-height: 1.45; color: var(--texto); }
.k4-itens li { padding: 10px 0; }
.k4-itens strong { display: block; font: 400 24px/1.15 'DM Serif Display', Georgia, serif; color: var(--forte); }
.trena { margin-top: var(--cab); }
.trena-tit { margin: 0 0 10px; font-size: 15px; font-weight: 500; color: var(--texto); }
.puxa { --p: 100%; position: relative; height: 40px; }
.banda { position: absolute; inset: 0; border-radius: 5px; background-color: #F4C63D; background-image: repeating-linear-gradient(to right, rgba(20,24,31,.55) 0 2px, transparent 2px 11.3636%), repeating-linear-gradient(to right, rgba(20,24,31,.3) 0 1px, transparent 1px 2.2727%); background-size: 100% 20px, 100% 11px; background-repeat: no-repeat; box-shadow: 0 8px 18px -10px rgba(20,24,31,.4); clip-path: inset(-20px calc(100% - var(--p)) -20px 0); }
.trena-r { position: relative; list-style: none; margin: 0; padding: 0; height: 86px; }
.trena-r li { position: absolute; top: 0; padding-top: 12px; }
.trena-r li::before { content: ''; position: absolute; left: 0; top: -40px; width: 3px; height: 52px; background: var(--forte); }
.trena-r b { display: block; padding-left: 10px; font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--apoio); transition: color .25s var(--suave); font-variant-numeric: tabular-nums; }
.trena-r span { display: block; padding-left: 10px; font-size: 15.5px; color: var(--texto); white-space: nowrap; }
.t0 { left: 0; }
.t200 { left: 45.45%; }
.t273 { left: 62.05%; }
.t326 { left: 74.09%; }
.t400 { left: 90.91%; }
.t400 span { position: relative; left: -40px; }
/* depois: papel e a pasta */
.k5 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 88px); align-items: center; padding: calc(var(--b) + clamp(30px, 4vw, 60px)) var(--lado) calc(var(--respiro) * .5); background: var(--papel); }
.k5-arte { width: 100%; max-width: 480px; height: auto; mix-blend-mode: multiply; }
.k5-txt ul { list-style: none; margin: 30px 0 34px; padding: 0; }
.k5-txt li { padding: 16px 0; }
.k5-txt li + li { border-top: 1px dashed rgba(35,48,122,.25); }
.k5-txt h3 { margin: 0 0 4px; font: 400 26px/1.15 'DM Serif Display', Georgia, serif; color: var(--forte); }
.k5-txt li p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--texto); }
/* rodapé ilustrado: a cidade em tinta */
.fim { position: relative; background: var(--papel); color: #C9D2EE; }
.fim-arte { display: block; width: 100%; height: auto; min-height: 240px; object-fit: cover; object-position: 50% 100%; }
.fim-txt { padding: 8px var(--lado) 40px; background: var(--tinta); }
.fim-marca { margin: 0 0 36px; font: 400 clamp(40px, 6vw, 84px)/1 'DM Serif Display', Georgia, serif; color: #fff; }
.fim .pe { color: #C9D2EE; }
.fim .pe a { color: #fff; }
@media (max-width: 899px) {
  .m-area { left: 0; right: 0; width: auto; bottom: 46svh; }
  .m-passos { padding-inline: 14px; }
  .m-passo, .m-passo.primeiro { width: auto; min-width: 0; min-height: 78svh; align-items: flex-end; padding-bottom: 12px; }
  .m-passo:last-child { min-height: 100svh; }
  .m-passo > div { width: 100%; padding: 22px 22px 24px; background: #1B2763; border-radius: 22px; }
  .m .m-passo.primeiro { min-height: 100svh; }
  .m-apoio { font-size: 18px; }
  .m-item { font-size: 18px; margin-bottom: 12px; }
  .m-item strong { font-size: 21px; }
  .m-nome { font-size: 16px; }
  .m-chip b { font-size: 17px; }
  .m-chip p { padding: 6px 10px 7px; }
  .m-ficha { left: 12px; top: 16px; width: 250px; padding: 16px 18px; transform: none; }
  .m-ficha-v { font-size: 32px; margin-bottom: 8px !important; }
  .m-ficha-l { padding: 6px 0; font-size: 15px; }
  .caderno { grid-template-columns: minmax(0, 1fr); }
  .caderno::after { display: none; }
  .pag { padding: 28px 24px; }
  .pag.dir { padding-top: 0; }
  .k3, .k4-topo, .k5 { grid-template-columns: minmax(0, 1fr); }
  .fita { padding: 26px 24px 40px; }
  .trena-r { height: auto; display: block; margin-top: 12px; }
  .trena-r li { position: relative; left: auto; top: auto; display: flex; gap: 12px; align-items: baseline; padding: 10px 0 10px 16px; border-left: 8px solid #F4C63D; }
  .trena-r li::before { display: none; }
  .t400 span { left: 0; }
  .trena-r b, .trena-r span { padding-left: 0; white-space: normal; }
}
/* ── microinterações: cada uma diz algo sobre o dado ou responde a um gesto ── */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* a aguada se espalha do centro da cena: o atraso por bairro vem do JS */
.mm path { cursor: pointer; }
.mm:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; border-radius: 12px; }
.mm-dots circle { opacity: 0; transition: opacity .3s var(--suave); pointer-events: none; }
.mm-dots.on circle { opacity: 1; }
.mm-contorno { fill: none; stroke: var(--forte); stroke-width: .5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; pointer-events: none; transition: stroke-dashoffset .15s; }
.m[data-cena="bairro"] .mm-contorno { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--suave) .75s; }
.mm-realce { fill: none; stroke: var(--forte); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; opacity: 0; transition: opacity .15s; }
.mm-realce.on { opacity: 1; }
.m-chip p { animation: mola .55s var(--mola) both; animation-delay: inherit; }
.m-chip::after { content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--tinta); animation: anel 1s var(--suave) both; animation-delay: inherit; pointer-events: none; }
@keyframes mola { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes anel { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 3.4; } }
/* a leitura do bairro sob o ponteiro, o dedo ou as setas */
.m-dica { position: absolute; z-index: 4; width: 0; height: 0; pointer-events: none; }
.m-dica[hidden] { display: none; }
.m-dica::before { content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px var(--forte); }
.m-dica p { position: absolute; left: 15px; top: 0; translate: 0 -50%; margin: 0; padding: 8px 12px 9px; background: var(--cartao); border-radius: 14px; box-shadow: 0 2px 4px rgba(20,24,31,.08), 0 10px 24px -10px rgba(20,24,31,.28); white-space: nowrap; animation: mola .28s var(--mola) both; }
.m-dica.esq p { left: auto; right: 15px; }
.m-dica b { display: block; font-weight: 600; font-size: 20px; line-height: 1.1; color: var(--forte); font-variant-numeric: tabular-nums; }
.m-dica span { display: block; margin-top: 2px; font-weight: 500; font-size: 14.5px; line-height: 1.15; color: var(--texto); }
.m-ficha { transition: opacity .5s var(--suave), visibility .5s, translate .7s var(--mola), scale .7s var(--mola); translate: 0 14px; scale: .96; }
.m[data-cena="bairro"] .m-ficha { translate: 0 0; scale: 1; transition-delay: .5s; }
/* o traço do pincel se desenha sob o título */
.traco path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js-on .acao:not(.is-in) .traco path { stroke-dashoffset: 1; }
.js-on .acao.is-in .traco path { transition: stroke-dashoffset 1s var(--suave) .25s; }
/* o caderno abre e as seis linhas se escrevem */
/* o recorte fica na linha de dentro: elemento recortado a zero nunca é visto pelo IntersectionObserver */
.pag-linha { display: block; clip-path: inset(-4px 0 -4px -4px); }
.js-on .pag.dir li:not(.is-in) .pag-linha { clip-path: inset(-4px 100% -4px -4px); }
.js-on .pag-linha { transition: clip-path .75s var(--suave); }
@media (min-width: 900px) {
  .pag.dir { position: relative; z-index: 1; transform-origin: 0 50%; backface-visibility: hidden; }
  .js-on .pag.dir { transition: transform 1.25s var(--suave) .1s; }
  .js-on .caderno:not(.is-in) .pag.dir { transform: perspective(1800px) rotateY(-170deg); }
  .js-on .pag-linha { transition-delay: calc(.75s + var(--i, 0) * .15s); }
}
/* a fita sai da máquina, linha a linha */
.js-on .fita-p.rv:not(.is-in) { opacity: 1; transform: none; }
.js-on .fita-p:not(.is-in) .fita-s { clip-path: inset(-10px -60px 100% -60px); }
.js-on .fita-p.is-in .fita-s { clip-path: inset(-10px -60px -70px -60px); transition: clip-path 1.5s steps(11, end); }
/* a trena: puxe e as distâncias reais acendem */
.trena-r li.on b { color: var(--forte); }
.trena-r li::before { transition: background .25s; background: var(--apoio); }
.trena-r li.on::before { background: var(--forte); }
.puxa input { position: absolute; left: -11px; right: -11px; top: -8px; width: calc(100% + 22px); height: 56px; margin: 0; background: none; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.puxa input[hidden] { display: none; }
.puxa input::-webkit-slider-runnable-track { height: 56px; background: none; }
.puxa input::-moz-range-track { height: 56px; background: none; }
.puxa input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 56px; border: 0; border-radius: 7px; background: var(--forte); box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 8px 16px -8px rgba(20,24,31,.6); transition: scale .25s var(--mola); }
.puxa input::-moz-range-thumb { width: 22px; height: 56px; border: 0; border-radius: 7px; background: var(--forte); box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); }
.puxa input:hover::-webkit-slider-thumb, .puxa input:active::-webkit-slider-thumb { scale: 1.08; }
.puxa input:focus { outline: none; }
.puxa input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--tinta); outline-offset: 2px; }
.puxa input:focus-visible::-moz-range-thumb { outline: 3px solid var(--tinta); outline-offset: 2px; }
.puxa-m { position: absolute; left: var(--p); top: -52px; translate: -50% 0; padding: 5px 11px; border-radius: 10px; background: var(--forte); color: #fff; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.puxa-m[hidden] { display: none; }
/* os objetos da mesa respondem à mão */
@media (hover: hover) and (pointer: fine) {
  .k4-arte, .k5-arte, .pag-arte { transition: transform .55s var(--mola), opacity .8s var(--suave); }
  .k4-arte:hover, .k5-arte:hover, .pag-arte:hover { transform: translateY(-7px) rotate(-1.4deg); }
}
@supports (animation-timeline: view()) {
  .k4-arte, .k5-arte, .pag-arte { animation: flutua linear both; animation-timeline: view(); }
  @keyframes flutua { from { translate: 0 22px; } to { translate: 0 -22px; } }
}
/* o atalho chega ao campo e o campo avisa */
.repete:active { transform: translateY(1px) scale(.98); transition-duration: .08s; }
.lista.chama #email { animation: chama 1.1s var(--suave) 2; }
@keyframes chama { 0% { box-shadow: 0 0 0 0 rgba(143,168,234,.75), var(--sombra); } 100% { box-shadow: 0 0 0 20px rgba(143,168,234,0), var(--sombra); } }
@media (prefers-reduced-motion: reduce) {
  .k4-arte, .k5-arte, .pag-arte { animation: none; translate: none; }
  .m-chip p, .m-chip::after, .m-dica p, .lista.chama #email { animation: none !important; }
  .m-chip::after { display: none; }
  .mm-contorno { transition: none !important; }
  .m-ficha, .m[data-cena="bairro"] .m-ficha { transition: none; translate: none; scale: 1; }
  .mm-g, .mm path { transition: none; }
  .js-on .rv:not(.is-in) { opacity: 1; transform: none; }
}

/* aviso de cookies: não cobre o formulário; recusar pesa o mesmo que aceitar */
.escolha { position: fixed; right: 20px; bottom: 20px; z-index: 20; width: min(420px, calc(100vw - 40px)); padding: 16px 18px; background: var(--cartao); border-radius: 18px; box-shadow: 0 2px 4px rgba(20,24,31,.08), 0 16px 40px -16px rgba(20,24,31,.35); }
.escolha[hidden] { display: none; }
.escolha p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.4; color: var(--texto); }
.escolha-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.escolha button { min-height: 44px; padding: 10px 16px; font: 600 15px/1.2 'DM Sans', system-ui, sans-serif; color: var(--tinta); background: var(--tinta-clara); border: 0; border-radius: 12px; cursor: pointer; }
.escolha button[data-escolha="aceito"] { color: #fff; background: var(--tinta); }
@media (max-width: 640px) {
  .escolha { right: 0; bottom: 0; width: 100%; padding: 14px 20px 16px; border-radius: 18px 18px 0 0; }
}