/* Siodoni Luthieria — versão premium. Cores tiradas do brasão (marrom, creme, folha, ouro). */
:root {
  --ink: #140e0a;
  --ink-2: #1d1510;
  --wood: #422412;
  --paper: #f6f0d6;
  --paper-2: #ece3bd;
  --cream: #fcf7d1;
  --gold: #c9a24c;
  --gold-2: #e2c27a;
  --leaf: #80cc28;
  --red: #cf181f;
  --olive: #7f7a5e;
  --line-d: rgba(252, 247, 209, .14);
  --line-l: rgba(20, 14, 10, .14);
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(1rem, 4vw, 4.5rem);
  --wrap: min(100% - 2 * var(--gutter), 112rem);
  color-scheme: dark light;
}

/* rem fluido: o site inteiro cresce junto até telas 4K */
html { font-size: clamp(15px, .42vw + 9.6px, 28px); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
main { outline: none; }
.pular { position: fixed; left: 1rem; top: -4rem; z-index: 300; background: var(--gold); color: var(--ink); padding: .7rem 1rem; border-radius: 6px; }
.pular:focus { top: 1rem; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: var(--wrap); margin-inline: auto; }
.sec { padding-block: clamp(5rem, 13vh, 11rem); position: relative; }
.escuro { background: var(--ink); color: var(--cream); }
.claro { background: var(--paper); color: var(--ink); }
.claro-2 { background: var(--paper-2); color: var(--ink); }

/* ---------- tipografia ---------- */
.kicker { display: inline-flex; align-items: center; gap: .9em; font: 500 .72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.kicker::before { content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: .6; }
.t-xl, .t-l, .t-m { font-family: var(--serif); font-weight: 340; font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0; letter-spacing: -.025em; }
.t-xl { font-size: clamp(3.1rem, 8.6vw, 13.5rem); line-height: .9; }
.t-l { font-size: clamp(2.5rem, 5.6vw, 7.6rem); line-height: .95; }
.t-m { font-size: clamp(1.9rem, 3.2vw, 4rem); line-height: 1.02; }
.t-xl em, .t-l em, .t-m em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--gold); }
.claro .t-xl em, .claro .t-l em, .claro .t-m em { color: var(--wood); }
.lead { font-size: clamp(1.05rem, 1.15vw, 1.35rem); line-height: 1.55; max-width: 36rem; opacity: .86; }
.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; }
.cabeca { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: clamp(3rem, 7vh, 6rem); }
.cabeca .lead { justify-self: end; }
.cabeca .kicker { grid-column: 1 / -1; }

/* ---------- motion base ---------- */
[data-r] { opacity: 0; transform: translate3d(0, 2rem, 0); transition: opacity 1s var(--ease), transform 1.3s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
[data-r].in { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .12em; margin: -.06em -.02em -.12em; }
.split .w > span { display: inline-block; transform: translate3d(0, 110%, 0) rotate(4deg); transform-origin: 0 100%; transition: transform 1.25s var(--ease); transition-delay: calc(var(--i, 0) * 60ms + var(--d, 0ms)); }
.split.in .w > span { transform: none; }
/* o recorte fica na imagem: IntersectionObserver ignora elemento com clip-path total */
.revela { position: relative; overflow: hidden; }
.revela img { clip-path: inset(100% 0 0 0); transform: scale(1.22); transition: clip-path 1.5s var(--ease), transform 2s var(--ease), opacity .7s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.revela.in img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* ---------- abertura ---------- */
.abertura { position: fixed; inset: 0; z-index: 400; background: var(--ink); color: var(--cream); display: grid; place-items: center; clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-io); }
.abertura.sai { clip-path: inset(0 0 100% 0); }
html.sem-abertura .abertura { display: none; }
.abertura-centro { display: grid; justify-items: center; gap: 1.6rem; }
.abertura-logo { width: 13rem; aspect-ratio: 158/70; background: currentColor; -webkit-mask: url(assets/marca/logo-folha.svg) center/contain no-repeat; mask: url(assets/marca/logo-folha.svg) center/contain no-repeat; opacity: 0; transform: translateY(1rem); animation: sobe 1s var(--ease) .1s forwards; }
.abertura-corda { width: 18rem; height: 1px; background: var(--line-d); overflow: hidden; }
.abertura-corda i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); animation: corda 1.4s var(--ease-io) .25s forwards; }
.abertura-num { font: 500 .78rem var(--mono); letter-spacing: .2em; opacity: .7; }
@keyframes sobe { to { opacity: 1; transform: none; } }
@keyframes corda { to { transform: scaleX(1); } }

/* ---------- topo ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 60; color: var(--topo-cor, var(--cream)); transition: transform .6s var(--ease), background-color .5s, color .5s, backdrop-filter .5s; }
body[data-topo="claro"] .topo { --topo-cor: var(--ink); }
.topo.solido { --topo-cor: var(--cream); background: rgba(20, 14, 10, .74); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.topo.some { transform: translateY(-100%); }
.topo-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 5rem; padding-inline: var(--gutter); }
.topo-lado { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 3rem); }
.topo-lado:last-of-type { justify-content: flex-end; }
.topo-lado a { position: relative; font: 500 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding-block: .6rem; }
.topo-lado a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--ease); }
.topo-lado a:hover::after, .topo-lado a.ativo::after { transform: scaleX(1); transform-origin: 0 50%; }
.topo-logo span { display: block; width: 8.6rem; aspect-ratio: 158/70; background: currentColor; -webkit-mask: url(assets/marca/logo-folha.svg) center/contain no-repeat; mask: url(assets/marca/logo-folha.svg) center/contain no-repeat; transition: transform .6s var(--ease); }
.topo-logo:hover span { transform: scale(1.04); }
.idioma { position: relative; display: inline-flex; border: 1px solid currentColor; border-radius: 99px; padding: 2px; font: 500 .66rem/1 var(--mono); letter-spacing: .1em; opacity: .9; }
.idioma span { position: relative; z-index: 1; padding: .45rem .6rem; border-radius: 99px; transition: color .4s; }
.idioma::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 99px; background: currentColor; transition: transform .5s var(--ease); }
html[lang="en"] .idioma::before { transform: translateX(100%); }
html[lang="pt-BR"] .idioma [data-l="pt"], html[lang="en"] .idioma [data-l="en"] { color: var(--idioma-fundo, var(--ink)); }
body[data-topo="claro"] .topo:not(.solido) .idioma { --idioma-fundo: var(--paper); }
.progresso { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: .9; }
.menu-btn { display: none; width: 2.8rem; height: 2.8rem; position: relative; justify-self: end; }
.menu-btn i { position: absolute; left: .55rem; right: .55rem; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.menu-btn i:first-child { top: 1.05rem; }
.menu-btn i:last-child { top: 1.65rem; }
.menu-btn[aria-expanded="true"] i:first-child { top: 1.35rem; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { top: 1.35rem; transform: rotate(-45deg); }
.menu-movel { position: fixed; inset: 0; z-index: 55; background: var(--ink); color: var(--cream); display: grid; grid-template-rows: 1fr auto; padding: 7rem var(--gutter) 2.5rem; clip-path: circle(0% at calc(100% - 2.6rem) 2.5rem); transition: clip-path .9s var(--ease-io); }
.menu-movel.aberto { clip-path: circle(150% at calc(100% - 2.6rem) 2.5rem); }
.menu-movel nav { display: grid; align-content: center; gap: .3rem; }
.menu-movel nav a { font: 340 clamp(2.6rem, 11vw, 4.4rem)/1.1 var(--serif); letter-spacing: -.02em; opacity: 0; transform: translateY(1.5rem); transition: opacity .6s, transform .8s var(--ease); }
.menu-movel.aberto nav a { opacity: 1; transform: none; }
.menu-movel.aberto nav a:nth-child(2) { transition-delay: .06s; }
.menu-movel.aberto nav a:nth-child(3) { transition-delay: .12s; }
.menu-movel.aberto nav a:nth-child(4) { transition-delay: .18s; }
.menu-movel.aberto nav a:nth-child(5) { transition-delay: .24s; }
.menu-movel-pe { display: flex; justify-content: space-between; align-items: center; font: .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.menu-movel .idioma { --idioma-fundo: var(--ink); }

/* ---------- botões ---------- */
.btn { --b: var(--gold); --c: var(--ink); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: .9em; padding: 1.15em 1.8em; border-radius: 99px; background: var(--b); color: var(--c); font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: color .5s var(--ease), transform .5s var(--ease); will-change: transform; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cream); border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--ease); }
.btn:hover::before { transform: none; }
.btn-linha { --b: transparent; --c: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.btn-linha:hover { color: var(--ink); }
.claro .btn-linha::before, .claro-2 .btn-linha::before { background: var(--ink); }
.claro .btn-linha:hover, .claro-2 .btn-linha:hover { color: var(--cream); }
.claro .btn:not(.btn-linha) { --b: var(--ink); --c: var(--cream); }
.claro .btn:not(.btn-linha):hover { color: var(--ink); }
.claro .btn:not(.btn-linha)::before { background: var(--gold); }
.btn svg { width: 1.1em; height: 1.1em; transition: transform .6s var(--ease); }
.btn:hover svg { transform: translateX(.3em); }
.btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.seta-link { display: inline-flex; align-items: center; gap: .7rem; font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.seta-link svg { width: 1.05rem; transition: transform .6s var(--ease); }
.seta-link:hover svg { transform: translateX(.35rem); }

/* ---------- herói da home ---------- */
.heroi { position: relative; height: 100svh; min-height: 38rem; overflow: hidden; background: var(--ink); color: var(--cream); }
.heroi-fundo { position: absolute; inset: -4% 0 -4%; will-change: transform; }
.heroi-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.heroi-slide.ativo { opacity: 1; }
.heroi-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.heroi-slide.ativo img, .heroi-slide.saindo img { animation: kenburns 11s linear forwards; }
@keyframes kenburns { from { transform: scale(1.16) translate3d(var(--kx, 1.5%), var(--ky, 1%), 0); } to { transform: scale(1.02) translate3d(0, 0, 0); } }
.heroi::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 14, 10, .62) 0%, rgba(20, 14, 10, .08) 30%, rgba(20, 14, 10, .2) 55%, rgba(20, 14, 10, .9) 100%), linear-gradient(90deg, rgba(20, 14, 10, .62) 0%, rgba(20, 14, 10, .25) 45%, transparent 70%), radial-gradient(120% 90% at 30% 60%, transparent 40%, rgba(20, 14, 10, .5) 100%); }
.heroi-conteudo { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(7rem, 16vh, 12rem); display: grid; gap: 2rem; will-change: transform, opacity; }
.heroi h1 { max-width: 13ch; }
.heroi-rodape { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; }
.heroi-base { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 2.2rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font: 500 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.heroi-contador { display: flex; align-items: center; gap: 1rem; }
.heroi-barras { display: flex; gap: .35rem; }
.heroi-barras i { width: 2.2rem; height: 2px; background: var(--line-d); overflow: hidden; }
.heroi-barras i::after { content: ""; display: block; height: 100%; background: var(--cream); transform: scaleX(0); transform-origin: 0 50%; }
.heroi-barras i.feita::after { transform: scaleX(1); }
.heroi-barras i.ativa::after { animation: barra var(--dur, 6s) linear forwards; }
@keyframes barra { to { transform: scaleX(1); } }
.heroi-role { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.heroi-role i { width: 1px; height: 3rem; background: linear-gradient(var(--cream) 0 50%, transparent 0) 0 0 / 100% 200%; animation: role 2.2s var(--ease-io) infinite; opacity: .7; }
@keyframes role { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
.heroi-local { justify-self: end; opacity: .8; }

/* ---------- faixa de artistas ---------- */
.faixa { overflow: hidden; background: var(--ink); color: var(--cream); border-block: 1px solid var(--line-d); padding-block: clamp(1.2rem, 2.4vw, 2.2rem); }
.faixa-trilho { display: flex; width: max-content; animation: faixa 70s linear infinite; }
.faixa span { display: inline-flex; align-items: center; gap: .55em; padding-inline: .6em; white-space: nowrap; font: italic 300 clamp(2rem, 4.6vw, 6rem)/1 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.faixa span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(252, 247, 209, .7); font-style: normal; font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0; }
.faixa span::after { content: ""; width: .32em; height: .32em; margin-left: .55em; background: var(--gold); -webkit-mask: radial-gradient(circle, #000 60%, transparent 62%); mask: radial-gradient(circle, #000 60%, transparent 62%); transform: rotate(45deg); }
@keyframes faixa { to { transform: translateX(-50%); } }

/* ---------- manifesto ---------- */
.manifesto .grande { font: 320 clamp(1.9rem, 3.7vw, 4.8rem)/1.12 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 30; letter-spacing: -.02em; max-width: 21em; margin-top: 2.4rem; }
.manifesto .grande .pal { opacity: .14; transition: opacity .5s; }
.manifesto .grande .pal.lit { opacity: 1; }
.manifesto .grande em { font-style: italic; color: var(--wood); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: clamp(4rem, 10vh, 8rem); border-top: 1px solid var(--line-l); padding-top: 2rem; }
.numeros div { display: grid; gap: .6rem; }
.numeros b { font: 300 clamp(2.8rem, 5vw, 6.4rem)/1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.numeros span { font: 500 .7rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }

/* ---------- linhas: prancheta com o desenho técnico ---------- */
.prancheta { background-color: var(--ink); background-image: linear-gradient(rgba(252, 247, 209, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(252, 247, 209, .045) 1px, transparent 1px); background-size: 3.2rem 3.2rem; background-position: -1px -1px; }
.linhas-pin { position: relative; color: var(--cream); }
.pin-fixo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(2rem, 5vh, 4rem); padding-top: 4rem; }
.pin-cabeca { width: var(--wrap); margin-inline: auto; display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.pin-cabeca .lead { max-width: 26rem; }
.pin-conta { font: 500 .74rem var(--mono); letter-spacing: .14em; }
.pin-trilho { display: flex; gap: clamp(1.2rem, 2.4vw, 3rem); padding-inline: var(--gutter); width: max-content; will-change: transform; }
.painel { position: relative; flex: 0 0 auto; width: clamp(16rem, 23vw, 32rem); height: min(60vh, 46rem); display: grid; grid-template-rows: 1fr auto; padding: 1.4rem 1.4rem 1.6rem; border: 1px solid var(--line-d); border-radius: 3px; background: rgba(252, 247, 209, .015); transition: background-color .6s, border-color .6s; }
.painel:hover { background: rgba(252, 247, 209, .045); border-color: rgba(201, 162, 76, .55); }
.painel-num { position: absolute; top: 1.2rem; left: 1.4rem; font: 500 .7rem var(--mono); letter-spacing: .14em; opacity: .55; }
.painel-tag { position: absolute; top: 1.05rem; right: 1.2rem; font: 500 .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: .35rem .6rem; border: 1px solid var(--line-d); border-radius: 99px; }
.painel-desenho { position: relative; min-height: 0; display: grid; place-items: center; padding: 2.4rem 0 1rem; }
.painel-desenho::before { content: ""; position: absolute; left: 0; top: 2.6rem; bottom: 1rem; width: .6rem; border-left: 1px solid var(--line-d); background: repeating-linear-gradient(180deg, var(--line-d) 0 1px, transparent 1px 1.6rem); opacity: .9; }
.painel-desenho svg { height: 100%; width: auto; max-height: 100%; filter: invert(.95) sepia(.3) saturate(1.4); transition: transform .9s var(--ease); }
.painel:hover .painel-desenho svg { transform: translateY(-.6rem) rotate(-1.5deg); }
.painel h3 { font: 340 clamp(1.9rem, 2.6vw, 3.4rem)/1 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 144, "SOFT" 40; }
.painel p { font-size: .88rem; opacity: .72; margin-top: .55rem; min-height: 2.8em; }
.painel .seta-link { margin-top: 1.1rem; color: var(--gold-2); }
/* desenho do contorno: cada traço tem pathLength=1 (posto pelo app) */
.contorno .tr { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.8s var(--ease-io); transition-delay: calc(var(--k, 0) * 1ms); }
.contorno .ch { opacity: 0; transition: opacity 1.2s ease 1.5s; }
.desenhado .contorno .tr { stroke-dashoffset: 0; }
.desenhado .contorno .ch { opacity: 1; }

/* ---------- portfólio: famílias ---------- */
.familias { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.8rem, 1.6vw, 1.8rem); }
.familia { position: relative; display: block; color: var(--cream); border-radius: 3px; overflow: hidden; background: var(--ink); }
.familia:nth-child(1) { grid-column: span 7; aspect-ratio: 16/11; }
.familia:nth-child(2) { grid-column: span 5; aspect-ratio: 4/4.4; }
.familia:nth-child(3) { grid-column: span 5; aspect-ratio: 4/4.4; }
.familia:nth-child(4) { grid-column: span 7; aspect-ratio: 16/11; }
.familia .revela { position: absolute; inset: 0; }
.familia img { width: 100%; height: 100%; object-fit: cover; }
.familia .revela.in img { transition: clip-path 1.5s var(--ease) calc(var(--i, 0) * 90ms), transform 1.4s var(--ease); }
.familia:hover .revela.in img { transform: scale(1.06); }
.familia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(20, 14, 10, .82)); pointer-events: none; }
.familia-txt { position: absolute; z-index: 2; left: 1.6rem; right: 1.6rem; bottom: 1.4rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.familia h3 { font: 340 clamp(2rem, 3.4vw, 4.6rem)/.95 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 144, "SOFT" 40; }
.familia-conta { font: 500 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-top: .5rem; }
.circ { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; transition: background-color .5s, color .5s, transform .7s var(--ease); }
.circ svg { width: 1.1rem; transform: rotate(-45deg); transition: transform .7s var(--ease); }
.familia:hover .circ { background: var(--cream); color: var(--ink); }
.familia:hover .circ svg { transform: rotate(0); }

/* trilho arrastável (recém-saídos, fotos) */
.trilho-arrasta { display: flex; gap: clamp(.8rem, 1.4vw, 1.6rem); overflow-x: auto; padding-inline: var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.trilho-arrasta::-webkit-scrollbar { display: none; }
.trilho-arrasta.arrastando { cursor: grabbing; scroll-snap-type: none; }
.trilho-arrasta.arrastando a { pointer-events: none; }
.cartao { flex: 0 0 clamp(15rem, 21vw, 28rem); scroll-snap-align: start; display: grid; gap: .9rem; }
.cartao-foto { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 3px; background: var(--paper-2); }
.cartao-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cartao:hover .cartao-foto img { transform: scale(1.06); }
.cartao-info { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cartao h3 { font: 380 1.35rem/1.1 var(--serif); font-variation-settings: "opsz" 48; }
.cartao .mono { opacity: .62; white-space: nowrap; }
.etiqueta-serial { position: absolute; left: .8rem; top: .8rem; z-index: 2; font: 500 .62rem/1 var(--mono); letter-spacing: .14em; padding: .45rem .6rem; border-radius: 99px; background: rgba(20, 14, 10, .62); color: var(--cream); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sec-titulo-linha { display: flex; justify-content: space-between; align-items: end; gap: 2rem; width: var(--wrap); margin: 0 auto clamp(2rem, 5vh, 3.5rem); }

/* ---------- artistas: lista com foto que segue o cursor ---------- */
.lista-art { border-top: 1px solid var(--line-d); }
.lista-art a { display: grid; grid-template-columns: 3rem 1fr auto auto; align-items: center; gap: 1.4rem; padding-block: clamp(1rem, 1.8vw, 1.7rem); border-bottom: 1px solid var(--line-d); transition: padding .6s var(--ease), color .4s; }
.lista-art a:hover { padding-left: 1.2rem; color: var(--gold-2); }
.lista-art .n { font: 500 .7rem var(--mono); opacity: .5; }
.lista-art .nome { font: 340 clamp(1.7rem, 3.2vw, 4rem)/1 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 144, "SOFT" 40; }
.lista-art .banda { font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .65; text-align: right; }
.lista-art .bandeira { width: 1.6rem; height: auto; border-radius: 2px; opacity: .9; }
.destaque-art { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.destaque-foto { position: sticky; top: 7rem; }
.destaque-foto .revela { aspect-ratio: 4/5; border-radius: 3px; }
.destaque-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease, clip-path 1.5s var(--ease), transform 2s var(--ease); }
.destaque-foto img.on { opacity: 1; }
.destaque-foto figcaption { display: flex; justify-content: space-between; margin-top: 1rem; font: 500 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .75; }

/* ---------- loja ---------- */
.loja { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, 1.6vw, 1.8rem); }
.produto { display: grid; gap: 1rem; perspective: 900px; }
.produto-foto { aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: #e9e2c4; transform-style: preserve-3d; transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.produto:hover .produto-foto { box-shadow: 0 2.4rem 3rem -1.6rem rgba(20, 14, 10, .45); }
.produto-foto img { width: 100%; height: 100%; object-fit: cover; }
.produto h3 { font: 500 .92rem/1.35 var(--sans); }

/* ---------- chamada final ---------- */
.chamada { position: relative; overflow: hidden; color: var(--cream); background: var(--ink); min-height: 92vh; display: grid; place-items: center; text-align: center; }
.chamada-fundo { position: absolute; inset: -12% 0; will-change: transform; }
.chamada-fundo img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.chamada::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, transparent, rgba(20, 14, 10, .85)); }
.chamada-conteudo { position: relative; z-index: 2; display: grid; justify-items: center; gap: 3rem; padding: 6rem var(--gutter); }
.chamada h2 { max-width: 14ch; }
.btn-redondo { width: clamp(9rem, 13vw, 13rem); height: clamp(9rem, 13vw, 13rem); border-radius: 50%; padding: 0; justify-content: center; text-align: center; flex-direction: column; gap: .6rem; line-height: 1.3; }
.btn-redondo::before { border-radius: 50%; transform: scale(0); transition: transform .7s var(--ease); }
.btn-redondo:hover::before { transform: scale(1); }

/* ---------- rodapé ---------- */
.rodape { background: var(--ink); color: var(--cream); padding: clamp(4rem, 10vh, 8rem) var(--gutter) 2rem; overflow: hidden; }
.rodape-grade { width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 3rem clamp(2rem, 5vw, 6rem); align-items: start; }
.rodape-brasao { width: clamp(6rem, 8vw, 9rem); }
.rodape h4 { font: 500 .7rem var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .55; margin-bottom: 1.4rem; }
.rodape ul { display: grid; gap: .55rem; }
.rodape li a { font: 340 1.35rem/1.25 var(--serif); font-variation-settings: "opsz" 48; transition: color .3s, padding .5s var(--ease); }
.rodape li a:hover { color: var(--gold-2); padding-left: .4rem; }
.redes { display: flex; gap: .7rem; }
.redes a { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--line-d); display: grid; place-items: center; transition: background-color .4s, color .4s, border-color .4s; }
.redes a:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.redes svg { width: 1.1rem; height: 1.1rem; }
.rodape-marca { width: var(--wrap); margin: clamp(4rem, 9vh, 7rem) auto 0; aspect-ratio: 158/70; max-height: 42vh; background: linear-gradient(180deg, rgba(252, 247, 209, .16), rgba(252, 247, 209, .02)); -webkit-mask: url(assets/marca/logo-folha.svg) center/contain no-repeat; mask: url(assets/marca/logo-folha.svg) center/contain no-repeat; }
.rodape-base { width: var(--wrap); margin: 2.4rem auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font: .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .55; }

/* ---------- páginas internas ---------- */
.pagina-topo { padding-top: clamp(8rem, 18vh, 13rem); padding-bottom: clamp(3rem, 7vh, 5rem); }
.trilha { display: flex; flex-wrap: wrap; gap: .6rem; font: 500 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .65; margin-bottom: 2.2rem; }
.trilha a:hover { text-decoration: underline; text-underline-offset: .3em; }
.trilha span::before { content: "/"; margin-right: .6rem; opacity: .5; }

/* encomende: grade de linhas */
.grupo-linhas + .grupo-linhas { margin-top: clamp(4rem, 10vh, 7rem); }
.grupo-titulo { display: flex; align-items: baseline; gap: 1.2rem; border-bottom: 1px solid var(--line-l); padding-bottom: 1.2rem; margin-bottom: clamp(1.5rem, 3vh, 2.4rem); }
.grupo-titulo h2 { font: 340 clamp(1.8rem, 2.8vw, 3.4rem)/1 var(--serif); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.grade-linhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: clamp(.8rem, 1.6vw, 1.8rem); }
.linha-card { position: relative; display: grid; grid-template-rows: 1fr auto; aspect-ratio: 3/4.3; padding: 1.4rem; border: 1px solid var(--line-l); border-radius: 3px; background-color: rgba(255, 255, 255, .25); background-image: linear-gradient(var(--line-l) 1px, transparent 1px), linear-gradient(90deg, var(--line-l) 1px, transparent 1px); background-size: 2.4rem 2.4rem; background-blend-mode: normal; transition: background-color .6s, border-color .6s, transform .8s var(--ease); }
.linha-card { background-image: linear-gradient(rgba(20, 14, 10, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 14, 10, .05) 1px, transparent 1px); }
.linha-card:hover { background-color: rgba(255, 255, 255, .6); border-color: var(--wood); }
.linha-card .painel-desenho svg { filter: none; }
.linha-card .painel-desenho::before { border-color: var(--line-l); background: repeating-linear-gradient(180deg, var(--line-l) 0 1px, transparent 1px 1.6rem); }
.linha-card:hover .painel-desenho svg { transform: translateY(-.6rem) rotate(-1.5deg); }
.linha-card h3 { font: 340 2.2rem/1 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 144, "SOFT" 40; }
.linha-card p { font-size: .88rem; opacity: .72; margin-top: .5rem; }

/* página da linha */
.linha-cabeca { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem clamp(2rem, 6vw, 7rem); align-items: end; }
.linha-cabeca .sub { font: italic 340 clamp(1.3rem, 1.9vw, 2.3rem)/1.2 var(--serif); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; color: var(--wood); margin-top: 1.4rem; max-width: 22ch; }
.linha-texto p { font-size: 1.04rem; line-height: 1.7; opacity: .86; }
.linha-texto p + p { margin-top: 1.1em; }
.vitrine { margin-top: clamp(3rem, 8vh, 6rem); }
.vitrine-palco { position: relative; aspect-ratio: 1800/560; }
.vitrine-palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateX(3%) scale(.98); transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.vitrine-palco img.on { opacity: 1; transform: none; }
.abas { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 2rem; }
.aba { padding: .7rem 1.2rem; border-radius: 99px; border: 1px solid var(--line-l); font: 500 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: background-color .4s, color .4s, border-color .4s; }
.aba[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.escuro .aba { border-color: var(--line-d); }
.escuro .aba[aria-pressed="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* simulador */
.sim { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(2rem, 4vw, 5rem); align-items: center; }
/* fundo infinito claro, como foto de estúdio: preto e branco aparecem igual */
.sim-palco { position: relative; aspect-ratio: 7/3.6; display: grid; place-items: center; padding: 6%; border-radius: 4px; overflow: hidden; background: radial-gradient(75% 85% at 50% 40%, #fffbe6 0%, #efe6c4 62%, #d9cc9f 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 2.5rem 5rem -2rem rgba(0, 0, 0, .6); }
.sim-palco::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 13%; height: 9%; background: radial-gradient(50% 50% at 50% 50%, rgba(66, 36, 18, .38), transparent); filter: blur(12px); z-index: 0; }
.sim-svg { position: relative; z-index: 1; width: 100%; transition: opacity .5s, transform .8s var(--ease); }
.sim-svg.trocando { opacity: 0; transform: translateX(-2%); }
.sim-svg svg { width: 100%; height: auto; }
.sim-svg [id], .sim-svg .marcacao { transition: fill .6s ease; }
.sim-ctrl { display: grid; gap: 1.5rem; }
.campo-sim { display: grid; gap: .7rem; }
.campo-sim-cab { display: flex; justify-content: space-between; align-items: baseline; font: 500 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.campo-sim-cab b { font: italic 400 1rem var(--serif); letter-spacing: 0; text-transform: none; color: var(--gold-2); font-variation-settings: "SOFT" 100, "WONK" 1; }
.cores { display: flex; flex-wrap: wrap; gap: .45rem; }
.cor { --c: #fff; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 0 var(--gold); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.cor:hover { transform: scale(1.12); }
.cor[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 2px var(--ink), 0 0 0 3.5px var(--gold); transform: scale(1.06); }
.cor.transp { background: repeating-conic-gradient(#d6d0b4 0 25%, #fff 0 50%) 50% / .6rem .6rem; }
.cor.vazio { background: linear-gradient(135deg, transparent 46%, var(--red) 46% 54%, transparent 54%), #fff; }
.sim-acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem; }

/* fotos em mosaico */
.mosaico { columns: 3 18rem; column-gap: clamp(.8rem, 1.4vw, 1.6rem); }
.mosaico > * { break-inside: avoid; margin-bottom: clamp(.8rem, 1.4vw, 1.6rem); display: block; position: relative; border-radius: 3px; overflow: hidden; }
.mosaico img { width: 100%; transition: transform 1.2s var(--ease); }
.mosaico > *:hover img { transform: scale(1.04); }
.mosaico .etiqueta-serial { opacity: 0; transform: translateY(-.4rem); transition: opacity .4s, transform .5s var(--ease); }
.mosaico > *:hover .etiqueta-serial { opacity: 1; transform: none; }

/* vídeos (YouTube só carrega no clique) */
.videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.8rem, 1.6vw, 1.8rem); }
.video { position: relative; aspect-ratio: 16/9; border-radius: 3px; overflow: hidden; background: #000; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .5s, transform 1.2s var(--ease); }
.video:hover img { opacity: 1; transform: scale(1.04); }
.video button { position: absolute; inset: 0; display: grid; place-items: center; }
.video button span { width: 5rem; height: 5rem; border-radius: 50%; background: rgba(252, 247, 209, .92); color: var(--ink); display: grid; place-items: center; transition: transform .6s var(--ease); }
.video:hover button span { transform: scale(1.1); }
.video button svg { width: 1.4rem; margin-left: .2rem; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* navegação anterior/próximo */
.vizinhos { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-l); }
.escuro .vizinhos { border-color: var(--line-d); }
.vizinhos a { padding: clamp(2rem, 5vh, 3.5rem) 0; display: grid; gap: .6rem; transition: color .4s; }
.vizinhos a + a { text-align: right; border-left: 1px solid var(--line-l); padding-left: 2rem; }
.vizinhos a:first-child { padding-right: 2rem; }
.vizinhos .mono { opacity: .6; }
.vizinhos b { font: 340 clamp(1.6rem, 3vw, 3.4rem)/1 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 144, "SOFT" 40; transition: transform .7s var(--ease); display: inline-block; }
.vizinhos a:hover b { transform: translateX(.6rem); }
.vizinhos a + a:hover b { transform: translateX(-.6rem); }

/* categoria + filtros */
.filtros { position: sticky; top: 5rem; z-index: 20; background: rgba(246, 240, 214, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block: 1px solid var(--line-l); padding-block: .9rem; margin-bottom: clamp(2rem, 4vh, 3rem); transition: top .6s var(--ease); }
.topo.some ~ main .filtros { top: 0; }
.filtros .wrap { display: grid; gap: .8rem; }
.filtro-grupo { display: flex; align-items: center; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.filtro-grupo::-webkit-scrollbar { display: none; }
.filtro-grupo > span { flex: none; width: 5.2rem; font: 500 .66rem var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.chip { flex: none; padding: .55rem .95rem; border-radius: 99px; border: 1px solid var(--line-l); font: 500 .74rem/1 var(--sans); white-space: nowrap; transition: background-color .35s, color .35s, border-color .35s; }
.chip sup { font: 500 .6rem var(--mono); opacity: .6; margin-left: .25rem; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.grade-inst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.2rem, 2vw, 2.4rem) clamp(.8rem, 1.6vw, 1.8rem); }
.grade-inst .cartao-foto { aspect-ratio: 3/2; }
.grade-inst .cartao { transition: opacity .5s; }
.vazio-msg { padding: 4rem 0; text-align: center; opacity: .6; font: italic 1.4rem var(--serif); }

/* página do instrumento */
.inst { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.inst-foto { position: sticky; top: 6.5rem; border-radius: 3px; overflow: hidden; background: var(--paper-2); }
.inst-foto img { width: 100%; cursor: zoom-in; }
.inst-dados h1 { margin-top: 1rem; }
.rotulo { position: relative; margin-block: 2.4rem; padding: 1.5rem 1.6rem; background: #fbf6dc; color: var(--ink); border: 1px solid rgba(66, 36, 18, .35); box-shadow: 0 0 0 5px #fbf6dc, 0 0 0 6px rgba(66, 36, 18, .25), 0 1.6rem 2.6rem -1.8rem rgba(20, 14, 10, .4); display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; transform: rotate(-.6deg); }
.rotulo img { width: 3.2rem; }
.rotulo-txt { display: grid; gap: .35rem; font: 500 .7rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.rotulo-txt b { font: 400 1.9rem/1 var(--serif); letter-spacing: 0; text-transform: none; font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; font-style: italic; color: var(--wood); }
.ficha { display: grid; gap: 2.2rem; }
.ficha h2 { font: 500 .72rem var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .6; padding-bottom: .9rem; border-bottom: 1px solid var(--line-l); }
.ficha dl { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; }
.ficha dt, .ficha dd { padding-block: .72rem; border-bottom: 1px solid var(--line-l); }
.ficha dt { font: 500 .7rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .6; padding-right: 1rem; }
.ficha dd { font-size: .98rem; }
.ficha dd a { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgba(20, 14, 10, .3); }
.ficha dd a:hover { text-decoration-color: currentColor; }

/* artistas página */
.grade-art { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: clamp(1.4rem, 2.4vw, 2.6rem) clamp(.8rem, 1.6vw, 1.8rem); }
.art { display: grid; gap: .9rem; }
.art-foto { aspect-ratio: 4/5; border-radius: 3px; overflow: hidden; background: var(--ink-2); }
.art-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 1s var(--ease), transform 1.2s var(--ease); }
.art:hover .art-foto img, .art.cor-on .art-foto img { filter: none; }
.art:hover .art-foto img { transform: scale(1.05); }
.art-info { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.art h3 { font: 380 1.5rem/1.1 var(--serif); font-variation-settings: "opsz" 48; }
.art .mono { opacity: .6; margin-top: .35rem; display: block; }
.art .bandeira { width: 1.6rem; flex: none; margin-top: .35rem; border-radius: 2px; }

/* contato */
.contato { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.contato-foto .revela { aspect-ratio: 4/5; border-radius: 3px; }
.contato-foto img { width: 100%; height: 100%; object-fit: cover; }
.form { display: grid; gap: 1.8rem; margin-top: 2.8rem; }
.campo { position: relative; display: block; }
.campo input, .campo textarea { width: 100%; font: 400 16px/1.5 var(--sans); font-size: max(16px, 1.05rem); color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--line-l); padding: 1.6rem 0 .7rem; border-radius: 0; outline: none; resize: vertical; transition: border-color .4s; }
.campo textarea { min-height: 9rem; }
.campo span { position: absolute; left: 0; top: 1.6rem; font: 500 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .6; transition: transform .5s var(--ease), opacity .4s; transform-origin: 0 0; pointer-events: none; }
.campo input:focus ~ span, .campo input:not(:placeholder-shown) ~ span, .campo textarea:focus ~ span, .campo textarea:not(:placeholder-shown) ~ span { transform: translateY(-1.5rem) scale(.86); opacity: .9; }
.campo i { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--wood); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.campo input:focus ~ i, .campo textarea:focus ~ i { transform: scaleX(1); }
.form-aviso { font-size: .86rem; opacity: .7; }
.contato-redes { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.contato-redes .redes a { border-color: var(--line-l); }
.contato-redes .redes a:hover { background: var(--ink); color: var(--cream); }

/* ---------- lupa ---------- */
.lupa { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12, 9, 6, .96); color: var(--cream); overflow: hidden; }
.lupa[open] { display: grid; place-items: center; animation: lupa-in .5s var(--ease); }
.lupa::backdrop { background: transparent; }
@keyframes lupa-in { from { opacity: 0; } }
.lupa figure { width: 100%; height: 100%; display: grid; place-items: center; padding: 4.5rem 5.5rem; touch-action: pan-y; }
.lupa img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; transition: opacity .3s, transform .5s var(--ease); }
.lupa img.troca { opacity: 0; transform: scale(.97); }
.lupa-fechar { position: absolute; top: 1.4rem; right: 1.6rem; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line-d); font-size: 1rem; }
.lupa-seta { position: absolute; top: 50%; translate: 0 -50%; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 1px solid var(--line-d); font-size: 1.2rem; transition: background-color .3s, color .3s; }
.lupa-seta:hover, .lupa-fechar:hover { background: var(--cream); color: var(--ink); }
.lupa-seta.ant { left: 1.4rem; }
.lupa-seta.prox { right: 1.4rem; }
.lupa-conta { position: absolute; bottom: 1.6rem; left: 50%; translate: -50% 0; font: 500 .74rem var(--mono); letter-spacing: .14em; opacity: .7; }

/* ---------- cursor e grão ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  /* contêiner de tamanho zero: um fixed de tela cheia com difference inverte a página inteira no Chrome */
  .cursor { display: block; position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 250; pointer-events: none; mix-blend-mode: difference; color: #fff; }
  .cursor-ponto, .cursor-anel { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
  .cursor-ponto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
  .cursor-anel { width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; display: grid; place-items: center; }
  .cursor-anel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); transition: transform .5s var(--ease), background-color .4s, border-color .4s; }
  .cursor-anel b { position: relative; font: 600 .6rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .3s; }
  .cursor.link .cursor-anel::before { transform: scale(1.6); background: rgba(255, 255, 255, .12); }
  .cursor.rotulo .cursor-anel::before { transform: scale(2.5); background: #fff; border-color: #fff; }
  .cursor.rotulo .cursor-anel b { opacity: 1; }
  .cursor.rotulo .cursor-ponto, .cursor.link .cursor-ponto { opacity: 0; }
  .cursor.sumido { opacity: 0; }
}
.grao { position: fixed; inset: 0; z-index: 240; pointer-events: none; opacity: .09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* troca de página */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .7s; animation-timing-function: var(--ease-io); }
::view-transition-old(root) { animation-name: pag-sai; }
::view-transition-new(root) { animation-name: pag-entra; }
@keyframes pag-sai { to { opacity: 0; transform: translateY(-2.5rem); } }
@keyframes pag-entra { from { opacity: 0; transform: translateY(3rem); } }
::view-transition-group(heroi) { animation-duration: .9s; animation-timing-function: var(--ease); }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--ease); }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .loja { grid-template-columns: repeat(2, 1fr); }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .sim { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .topo-nav { grid-template-columns: 1fr auto; height: 4.4rem; }
  .topo-lado { display: none; }
  .topo-logo { justify-self: start; }
  .topo-logo span { width: 7.4rem; }
  .menu-btn { display: block; }
  .cabeca, .linha-cabeca, .destaque-art, .inst, .contato { grid-template-columns: 1fr; }
  .cabeca .lead { justify-self: start; }
  .heroi-base { grid-template-columns: 1fr auto; }
  .heroi-local { display: none; }
  .heroi-role { justify-self: end; }
  /* sem pino: as linhas viram carrossel de dedo */
  .linhas-pin { height: auto !important; }
  .pin-fixo { position: relative; height: auto; padding-block: 5rem 4rem; }
  .pin-cabeca { flex-direction: column; align-items: start; }
  .pin-trilho { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; transform: none !important; padding-bottom: .5rem; }
  .pin-trilho::-webkit-scrollbar { display: none; }
  .painel { width: min(78vw, 22rem); height: 30rem; scroll-snap-align: center; }
  .familias > .familia { grid-column: 1 / -1 !important; aspect-ratio: 4/3.4 !important; }
  .destaque-foto { position: relative; top: 0; }
  .inst-foto { position: relative; top: 0; }
  .videos { grid-template-columns: 1fr; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-brasao { grid-column: 1 / -1; }
  .lista-art a { grid-template-columns: 1fr auto; gap: .4rem 1rem; }
  .lista-art .n { display: none; }
  .lista-art .banda { grid-column: 1; grid-row: 2; text-align: left; }
  .lista-art .bandeira { grid-row: 1 / 3; grid-column: 2; }
  .filtros { top: 4.4rem; }
  .lupa figure { padding: 4rem .6rem; }
  .lupa-seta { top: auto; bottom: 1rem; translate: none; width: 3rem; height: 3rem; }
  .lupa-conta { bottom: 2rem; }
  .vizinhos b { font-size: 1.5rem; }
  /* no celular as amostras ficam embaixo: o palco gruda no topo pra cor aparecer enquanto escolhe */
  .sim-palco { position: sticky; top: 4.8rem; z-index: 2; padding: 3%; box-shadow: 0 -4.8rem 0 0 var(--ink), 0 1.4rem 1.6rem -.4rem var(--ink); }
}
@media (max-width: 560px) {
  .loja { gap: .7rem; }
  .numeros { gap: 1.6rem 1rem; }
  .heroi-conteudo { bottom: 7rem; }
  .ficha dl { grid-template-columns: 1fr; }
  .ficha dt { border-bottom: 0; padding-bottom: 0; }
  .ficha dd { padding-top: .2rem; }
  .rotulo { grid-template-columns: 1fr; }
  .grade-art { grid-template-columns: 1fr 1fr; }
  .art h3 { font-size: 1.15rem; }
}
/* Movimento reduzido (muitos Android ligam junto com economia de bateria): mantém fades, tira deslocamentos grandes */
@media (prefers-reduced-motion: reduce) {
  [data-r], .split .w > span { transform: none !important; }
  .revela { opacity: 0; transition: opacity 1s; }
  .revela.in { opacity: 1; }
  .revela img { transform: none !important; clip-path: none !important; }
  .heroi-slide.ativo img { animation-duration: 22s; }
  .faixa-trilho { animation-duration: 120s; }
  .linhas-pin { height: auto !important; }
  .pin-fixo { position: relative; height: auto; padding-block: 6rem 5rem; }
  .pin-trilho { width: auto; overflow-x: auto; transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}