/* Catálogo de efeitos Izynet. Tema: grafite com laranja de sinal. Cada efeito tem seu bloco, na ordem da página. */
@font-face { font-family: "Bricolage"; src: url(../fonts/bricolage.woff2) format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }

:root {
  --bg: #111214; --bg-2: #1a1b1f; --bg-3: #24252a; --linha: #2c2d33;
  --fg: #eceae4; --fg-2: #a6a49c; --acento: #ff6b2c; --acento-2: #ffd2bd;
  --fundo: #111214; --texto: #eceae4; --texto-2: #b9b7af;
  --raio: 18px; --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fonte: "Bricolage", system-ui, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1rem/1.55 var(--fonte); overflow-x: clip; }
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
a { color: inherit; }
button { font: inherit; color: inherit; }
code { font: 500 .82em/1 ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--bg-3); color: var(--acento-2); padding: .25em .5em; border-radius: 6px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* ---------- Barra de progresso (efeito progresso) ---------- */
.progresso { position: fixed; inset: 0 0 auto; height: 3px; z-index: 80; pointer-events: none; }
.progresso span { display: block; height: 100%; background: var(--acento); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- Topo ---------- */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 12px var(--gutter); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.marca { text-decoration: none; font-weight: 600; letter-spacing: -0.01em; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca b { color: var(--acento); }
.topo__sel, .topo__menu { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--bg-2); text-decoration: none; font-size: .92rem; cursor: pointer; transition: transform .16s var(--ease), border-color .16s; }
.topo__sel:active, .topo__menu:active { transform: scale(.97); }
.topo__sel i, .menu__lista i, .chip i { font-style: normal; font-size: .8em; min-width: 1.6em; padding: .15em .45em; border-radius: 999px; background: var(--bg-3); text-align: center; }
.topo__sel.tem i { background: var(--acento); color: #1a0d05; }

/* ---------- Menu em tela cheia (efeito menu-tela) ---------- */
.menu { position: fixed; inset: 0; z-index: 90; background: var(--acento); color: #1a0d05; display: grid; align-content: center; padding: 80px var(--gutter); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__lista { list-style: none; padding: 0; display: grid; gap: 4px; }
.menu__lista a { display: flex; align-items: baseline; gap: 14px; text-decoration: none; font-size: clamp(1.8rem, 5vw, 3.8rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.menu__lista a:hover span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.menu__lista i { background: #1a0d05; color: var(--acento); font-size: 1rem; }
.menu__fecha { position: absolute; top: 14px; right: var(--gutter); min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid #1a0d05; background: transparent; cursor: pointer; font-weight: 600; }
.menu__lista li { overflow: hidden; }

/* ---------- Abertura ---------- */
.abre { min-height: 70svh; display: grid; align-content: end; gap: 22px; padding: 120px var(--gutter) 64px; border-bottom: 1px solid var(--linha); }
.abre__h { font-size: clamp(2.6rem, 8vw, 6.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: .9; }
.abre__p { max-width: 40rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--fg-2); }
.abre__p b { color: var(--fg); }
.abre__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); text-decoration: none; transition: border-color .2s, background .2s; }
.chip:hover { border-color: var(--acento); }
.abre__nota { font-size: .9rem; color: var(--fg-2); max-width: 46rem; }

/* ---------- Categoria e ficha ---------- */
.cat__cab { position: relative; padding: 72px var(--gutter) 22px; display: grid; gap: 8px; border-bottom: 1px solid var(--linha); }
.cat__cab h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); letter-spacing: -0.04em; }
.cat__cab p { color: var(--fg-2); max-width: 36rem; }
.cat__n { position: absolute; right: var(--gutter); top: 80px; font-size: .9rem; color: var(--fg-2); }

.ficha { border-bottom: 1px solid var(--linha); padding: 30px 0 40px; scroll-margin-top: 64px; }
.ficha__cab { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; padding: 0 var(--gutter) 24px; align-items: start; }
.ficha__n { font-size: .95rem; color: var(--acento); font-weight: 600; padding-top: .35em; font-variant-numeric: tabular-nums; }
.ficha__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.ficha__nome { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.ficha__info { grid-column: 2; display: grid; gap: 10px; max-width: 52rem; margin-top: 8px; }
.ficha__info dt { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.ficha__info dd { color: var(--texto); }
.ficha__linha { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.peso { display: inline-block; padding: .1em .6em; border-radius: 999px; font-size: .86rem; font-weight: 600; }
.peso--leve { background: #1f3b26; color: #a8e6b5; }
.peso--medio { background: #45391b; color: #f2d58a; }
.peso--pesado { background: #4a2219; color: #ffb39a; }
.quero { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--bg-2); cursor: pointer; user-select: none; transition: background .2s, border-color .2s, transform .16s var(--ease); }
.quero:active { transform: scale(.97); }
.quero input { width: 20px; height: 20px; accent-color: var(--acento); margin: 0; }
.quero:has(input:checked) { background: var(--acento); border-color: var(--acento); color: #1a0d05; font-weight: 600; }
.quero:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (min-width: 900px) {
  .ficha__cab { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .ficha__info { grid-column: 2; }
  .quero { grid-column: 3; grid-row: 1; margin-top: 0; }
}
.ficha__palco { padding: 0 var(--gutter); max-width: 1180px; margin: 0 auto; box-sizing: content-box; }
.ficha--larga .ficha__palco { padding: 0; max-width: none; }

/* caixa padrão de exemplo */
.caixa { position: relative; overflow: hidden; border-radius: var(--raio); background: var(--bg-2); border: 1px solid var(--linha); min-height: min(52svh, 420px); }
.caixa--texto { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: 24px; padding: 48px var(--gutter); text-align: center; }
.caixa--centro { display: grid; place-items: center; gap: 16px; padding: 32px; }
.caixa--claro { background: #ece6dc; color: #2b1b13; border-color: #d8cfc1; }
.repete { position: absolute; right: 14px; bottom: 14px; z-index: 5; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--bg-3); cursor: pointer; font-size: .86rem; transition: transform .16s var(--ease); }
.repete:active { transform: scale(.97); }
.nota { font-size: .85rem; color: var(--fg-2); }

.painel { max-width: 30rem; padding: clamp(18px, 2.4vw, 28px); background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: var(--raio); position: relative; z-index: 2; }
.painel h2, .painel h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
.painel p { color: var(--texto-2); margin-top: 10px; }
.rotulo { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); display: block; margin-bottom: 10px; }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; background: var(--acento); color: #1a0d05; border: 0; border-radius: 999px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .16s var(--ease), filter .16s; }
.botao:hover { filter: brightness(1.07); }
.botao:active { transform: scale(.97); }
.botao--linha { background: transparent; color: var(--fg); border: 1.5px solid var(--fg); }
.botao--peq { min-height: 42px; padding: 0 18px; font-size: .9rem; }
.botao[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* ================= VÍDEO E CÂMERA ================= */
/* cine (igual ao módulo) */
.cine { position: relative; }
.cine__palco { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-items: end; background: #000; }
.cine__poster, .cine__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine__poster { object-fit: cover; }
.cine__canvas { display: none; }
.cine__palco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, #000 100%); pointer-events: none; }
.cine__momentos { position: relative; z-index: 2; display: grid; gap: 18px; padding: 30vh var(--gutter) 64px; }
.js .cine { height: calc(var(--cine-altura, 300vh) * .72); }
.js .cine__palco { position: sticky; top: 0; height: 100svh; min-height: 0; display: block; }
.js .cine__palco::after { display: none; }
.js .cine__canvas { display: block; }
.js .cine--pronto .cine__poster { visibility: hidden; }
.js .cine__momentos { position: absolute; inset: 0; padding: 0; display: block; }
.js .cine__momento { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(48px, 12vh, 120px); will-change: opacity, transform; }
.js .cine__momento[data-lado="dir"] .painel { margin-left: auto; }

/* enquadramento do celular */
.enq { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .36fr); gap: clamp(12px, 3vw, 32px); align-items: center; }
.enq__largo, .enq__cel { position: relative; border-radius: var(--raio); overflow: hidden; background: #000; }
.enq__largo { aspect-ratio: 16 / 9; cursor: crosshair; touch-action: none; }
.enq__largo img { width: 100%; height: 100%; object-fit: cover; }
.enq__cel { aspect-ratio: 9 / 19; border: 6px solid var(--bg-3); border-radius: 28px; }
.enq__cel img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx) var(--fy); transition: object-position .35s var(--ease); }
.enq__ponto { position: absolute; left: var(--fx); top: var(--fy); width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 2px solid var(--acento); box-shadow: 0 0 0 4px rgba(255,107,44,.25); transition: left .35s var(--ease), top .35s var(--ease); pointer-events: none; }
.enq__rot { position: absolute; left: 10px; bottom: 10px; font-size: .74rem; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.6); }

/* zoom contínuo (demo 2) */
.zoom__palco { position: relative; height: 100svh; overflow: hidden; }
.zoom__img { width: 100%; height: 100%; object-fit: cover; object-position: 49% 50%; transform-origin: 49% 56%; }
.zoom__palco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 60%, rgba(0,0,0,.45)); pointer-events: none; }
.zoom__fala { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 10svh; z-index: 2; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.zoom__fala h3 { font-size: clamp(1.8rem, 4vw, 3.2rem); max-width: 14ch; }
.zoom__fala--2 { top: 14svh; bottom: auto; text-align: right; }
.zoom__fala--2 h3 { margin-left: auto; }
.js .zoom { height: 220vh; }
.js .zoom__palco { position: sticky; top: 0; }
.js .zoom__fala { opacity: 0; }

/* parallax */
.para { position: relative; }
.para__palco { position: relative; min-height: 100svh; overflow: hidden; display: grid; place-items: center; padding: 10svh var(--gutter); }
.js .para { height: 220vh; }
.js .para__palco { position: sticky; top: 0; height: 100svh; }
.para__h { position: relative; z-index: 3; font-size: clamp(2.2rem, 6vw, 5rem); letter-spacing: -0.04em; text-align: center; mix-blend-mode: difference; color: #fff; }
.para__i { position: absolute; border-radius: 14px; overflow: hidden; }
.para__i img { width: 100%; }
.para__i--1 { width: clamp(120px, 20vw, 280px); left: 6%; top: 12%; }
.para__i--2 { width: clamp(140px, 24vw, 340px); right: 5%; top: 6%; z-index: 1; }
.para__i--3 { width: clamp(110px, 16vw, 220px); left: 14%; bottom: 8%; z-index: 4; }
.para__i--4 { width: clamp(130px, 22vw, 300px); right: 12%; bottom: 14%; }

/* vídeo de fundo */
.vfundo { display: grid; align-items: end; padding: clamp(18px, 4vw, 40px); background: #000; }
.vfundo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ================= TEXTO ================= */
.manifesto__palco { min-height: 100svh; display: grid; place-items: center; padding: 80px var(--gutter); }
.manifesto__txt { max-width: 24ch; font-size: clamp(1.8rem, 4vw, 3.4rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
.js .manifesto { height: 190vh; }
.js .manifesto__palco { position: sticky; top: 0; height: 100svh; min-height: 0; }
.palavra { opacity: .14; transition: opacity .25s linear; }
.palavra.acesa { opacity: 1; }

.tp { font-size: clamp(2rem, 5vw, 4rem); max-width: 14ch; margin: 0 auto; letter-spacing: -0.035em; }
.tp .w { display: inline-block; }

.letras { padding: 56px var(--gutter); text-align: center; overflow: hidden; }
.letras__h { font: 900 clamp(4rem, 17vw, 15rem)/.85 "Arial Black", "Segoe UI Black", system-ui, sans-serif; letter-spacing: -0.04em; color: #c98b4e; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .letras__h { color: transparent; background: url(../img/letras.webp) center 30% / cover; -webkit-background-clip: text; background-clip: text; }
}

.emb-h { font-size: clamp(1.8rem, 4.4vw, 3.6rem); letter-spacing: -0.03em; }
.emb { color: var(--acento); display: inline-block; min-width: 6ch; text-align: left; font-variant-ligatures: none; }

.sm { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -0.035em; display: grid; justify-items: center; }
.sm__l { display: block; overflow: hidden; padding-bottom: .08em; }
.sm__l > span { display: block; }

.cp__palco { min-height: 60svh; display: grid; align-items: center; padding: 10svh var(--gutter); }
.js .cp { height: 190vh; }
.js .cp__palco { position: sticky; top: 0; height: 100svh; }
.cp__h { width: fit-content; font: 900 clamp(3rem, 10vw, 8.5rem)/.95 "Arial Black", "Segoe UI Black", system-ui, sans-serif; letter-spacing: -0.03em; color: var(--acento); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .js .cp__h { color: transparent; -webkit-text-stroke: 2px var(--acento); background: linear-gradient(90deg, var(--acento) 50%, transparent 50%) var(--cp, 100%) 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
}

.mq { padding: 36px 0; overflow: hidden; display: grid; gap: 10px; }
.mq__linha { display: flex; }
.mq__trilho { display: flex; flex: none; gap: 0; animation: mq 28s linear infinite; }
.mq__trilho span { flex: none; font-size: clamp(2rem, 5vw, 4.2rem); font-weight: 700; letter-spacing: -0.03em; padding: 0 .35em; white-space: nowrap; }
.mq__trilho span::after { content: "✦"; color: var(--acento); font-size: .45em; vertical-align: middle; margin-left: .7em; }
.mq__linha--volta .mq__trilho { animation-direction: reverse; animation-duration: 34s; }
.mq__linha--volta span { color: transparent; -webkit-text-stroke: 1.2px var(--fg-2); }
.mq:hover .mq__trilho { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

.ct { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; width: min(100%, 900px); }
.ct b { display: block; font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--acento); }
.ct span { color: var(--fg-2); }

.tc { position: relative; display: block; width: min(56vw, 220px); aspect-ratio: 1; text-decoration: none; }
.tc svg { width: 100%; height: 100%; animation: gira 16s linear infinite; }
.tc text { font: 600 15.5px var(--fonte); letter-spacing: .2em; fill: var(--fg); }
.tc__meio { position: absolute; inset: 0; margin: auto; width: 34%; height: 34%; border-radius: 50%; background: var(--acento); color: #1a0d05; display: grid; place-items: center; font-size: 2rem; transition: transform .3s var(--ease); }
.tc:hover .tc__meio { transform: scale(1.08) rotate(-12deg); }
@keyframes gira { to { transform: rotate(360deg); } }

.fv { font-size: clamp(2.8rem, 9vw, 7.5rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; user-select: none; touch-action: pan-y; }
.fv span { display: inline-block; transition: font-weight .12s linear; }

/* ================= IMAGEM ================= */
.ff { display: grid; grid-template-columns: 1fr; align-items: center; gap: 16px; padding: clamp(20px, 4vw, 48px); background: #000; }
@media (min-width: 800px) { .ff { grid-template-columns: .8fr 1.2fr; } }
.arte { position: relative; margin: 0; }
.arte img { width: 100%; }
.arte--direita img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }

.ad__caixa { max-width: 1000px; margin: 0 auto; position: relative; border-radius: var(--raio); overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; aspect-ratio: 1600 / 893; }
.ad__img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ad__caixa > picture { display: block; height: 100%; }
.ad__depois { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ad__linha { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.3); }
.ad__puxador { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.ad__puxador::before, .ad__puxador::after { content: ""; position: absolute; top: 50%; margin-top: -6px; border: 6px solid transparent; }
.ad__puxador::before { left: 8px; border-right-color: #222; }
.ad__puxador::after { right: 8px; border-left-color: #222; }
.ad__tag { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.88); color: #222; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ad__tag--a { left: 14px; } .ad__tag--d { right: 14px; }
.ad__range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ad__caixa:has(.ad__range:focus-visible) { outline: 2px solid var(--acento); outline-offset: 4px; }

.cort__palco { position: relative; display: grid; place-items: center; padding: 0 var(--gutter); min-height: 70svh; }
.js .cort { height: 200vh; }
.js .cort__palco { position: sticky; top: 0; height: 100svh; }
.cort__img { overflow: hidden; border-radius: var(--raio); height: 70svh; width: 100%; max-width: 1180px; margin: 0 auto; }
.cort__t { position: absolute; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; color: var(--fg-2); pointer-events: none; }
html:not(.js) .cort__t { display: none; }
.cort__img img { width: 100%; height: 100%; object-fit: cover; }

.dist { background: #d9d3cb; min-height: auto; padding: 0; }
.dist > svg { position: absolute; width: 0; height: 0; }
.dist__img { width: min(100%, 520px); margin: 0 auto; filter: url(#f-dist); cursor: pointer; }

.lant { background: #000; cursor: none; touch-action: pan-y; }
.lant img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lant__base { filter: brightness(.12) grayscale(.8); }
.lant__luz { -webkit-mask-image: radial-gradient(circle clamp(130px, 22vw, 240px) at var(--x) var(--y), #000 45%, transparent 100%); mask-image: radial-gradient(circle clamp(130px, 22vw, 240px) at var(--x) var(--y), #000 45%, transparent 100%); }

.lf { padding: clamp(16px, 4vw, 48px); min-height: auto; }
.lf__lista { list-style: none; padding: 0; }
.lf__lista a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--linha); text-decoration: none; font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; transition: color .2s, padding .3s var(--ease); }
.lf__lista li:first-child a { border-top: 1px solid var(--linha); }
.lf__lista i { font-style: normal; font-size: .9rem; color: var(--fg-2); }
.lf__lista img { display: none; }
.lf__flutua { position: absolute; left: 0; top: 0; width: clamp(180px, 22vw, 300px); aspect-ratio: 900 / 1117; object-fit: cover; border-radius: 14px; pointer-events: none; opacity: 0; z-index: 3; transition: opacity .25s; }
@media (hover: hover) { .lf__lista a:hover { color: var(--acento); padding-left: 18px; } }
@media (hover: none) {
  .lf__lista a { grid-template-columns: 1fr 72px; }
  .lf__lista img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 10px; grid-column: 2; grid-row: 1; }
  .lf__lista i { display: none; }
  .lf__flutua { display: none; }
}

.exp__palco { position: relative; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.exp__img { position: absolute; inset: 0; clip-path: inset(0 round 0); }
.exp__img img { width: 100%; height: 100%; object-fit: cover; }
.exp__t { position: relative; z-index: 2; font-size: clamp(2.2rem, 6vw, 5rem); font-weight: 800; letter-spacing: -0.04em; line-height: .95; text-align: center; color: #fff; text-shadow: 0 4px 40px rgba(0,0,0,.5); }
.js .exp { height: 190vh; }
.js .exp__palco { position: sticky; top: 0; }
.js .exp__img { clip-path: inset(30% 32% round 24px); }

.vh { padding: 0; aspect-ratio: 16 / 9; min-height: 0; background: #000; cursor: pointer; }
.vh video { width: 100%; height: 100%; object-fit: cover; }
.vh__dica { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.6); font-size: .82rem; transition: opacity .3s; }
.vh.toca .vh__dica { opacity: 0; }

.grao-demo { padding: 0; }
.grao-demo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.grao-demo .botao { position: absolute; left: 14px; bottom: 14px; z-index: 5; }
.grao-demo__metade { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; overflow: hidden; z-index: 4; pointer-events: none; border-left: 1px solid rgba(255,255,255,.35); }
.grao-demo__sem, .grao-demo__com { position: absolute; top: 14px; z-index: 5; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.6); font-size: .8rem; }
.grao-demo__sem { left: 14px; } .grao-demo__com { left: calc(50% + 14px); }
.grao::after, .com-grao body::after { content: ""; position: absolute; inset: -50%; z-index: 4; pointer-events: none; opacity: .6; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grao .5s steps(5) infinite; }
.com-grao body::after { position: fixed; z-index: 85; opacity: .35; }
@keyframes grao { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } }

/* ================= LAYOUT ================= */
.lateral__palco { padding: 40px 0; overflow: hidden; }
.lateral__trilho { display: flex; gap: clamp(16px, 3vw, 40px); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; }
.lateral__intro { flex: 0 0 min(80vw, 380px); align-self: center; }
.lateral__intro h3 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.lateral__intro p { color: var(--fg-2); margin-top: 12px; }
.cartao { flex: 0 0 min(72vw, 420px, calc((100svh - 170px) / 1.24)); margin: 0; scroll-snap-align: center; }
.cartao img { width: 100%; aspect-ratio: 900 / 1117; object-fit: cover; border-radius: 16px; }
.cartao figcaption { margin-top: 12px; color: var(--fg-2); }
.cartao b { display: block; font-size: 1.3rem; color: var(--fg); }
.js .lateral__trilho { align-items: center; overflow: visible; will-change: transform; }
.js .lateral__palco { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding: 0; }

.cor__passo { min-height: 70svh; display: grid; align-items: center; padding: 64px var(--gutter); background: var(--pb); color: var(--pf); }
.cor { transition: none; }
.js .cor__passo { background: transparent; color: inherit; }
.cor .painel { background: color-mix(in srgb, currentColor 8%, transparent); border-color: color-mix(in srgb, currentColor 18%, transparent); }
.cor .painel p { color: inherit; opacity: .8; }

.ap-caixa { padding: clamp(18px, 3vw, 36px) clamp(18px, 3vw, 36px) 72px; min-height: 0; }
.ap { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ap__i { min-height: 160px; padding: 20px; border-radius: 16px; background: var(--bg-3); border: 1px solid var(--linha); display: grid; align-content: space-between; }
.ap__i b { color: var(--acento); }
.ap__i span { font-size: 1.4rem; font-weight: 700; }

.emp { padding: 0 var(--gutter) 10svh; }
.emp__c { position: sticky; top: calc(76px + var(--i) * 14px); height: min(58svh, 500px); margin-bottom: 6svh; max-width: 1180px; margin-inline: auto; border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 1fr; background: var(--bg-3); border: 1px solid var(--linha); transform-origin: 50% 0; }
.emp__c img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.emp__t { padding: clamp(18px, 3vw, 40px); display: grid; align-content: start; gap: 8px; }
.emp__t b { color: var(--acento); }
.emp__t h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.emp__t p { color: var(--fg-2); }
@media (max-width: 799px) { .emp__c { grid-template-rows: auto 1fr; } }
@media (min-width: 800px) { .emp__c { grid-template-columns: 1fr 1fr; } }

.tl { display: grid; grid-template-columns: 1fr; padding: 0 var(--gutter); }
.tl__img { position: sticky; top: 64px; height: 42svh; z-index: 1; border-radius: var(--raio); overflow: hidden; background: #000; }
.tl__f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.tl__f.ativa { opacity: 1; }
.tl__bloco { min-height: 60svh; display: grid; align-items: center; position: relative; z-index: 2; }
@media (min-width: 800px) {
  .tl { grid-template-columns: 1fr 1fr; gap: 48px; }
  .tl { max-width: 1180px; margin: 0 auto; }
  .tl__img { top: 18svh; height: 64svh; grid-column: 2; grid-row: 1; }
  .tl__txt { grid-column: 1; grid-row: 1; }
  .tl__bloco { min-height: 72svh; }
}

.ld { position: relative; height: 130svh; padding: 0 var(--gutter); }
.ld__svg { position: absolute; left: 50%; top: 0; width: min(80vw, 420px); height: 100%; transform: translateX(-50%); overflow: visible; }
.ld__svg path { fill: none; stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ld__base { stroke: var(--linha); }
.ld__traco { stroke: var(--acento); }
.ld__pontos { list-style: none; padding: 0; position: absolute; inset: 0; }
.ld__pontos li { position: absolute; left: 50%; transform: translate(-50%, -50%); padding: 12px 20px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--linha); font-size: clamp(1.1rem, 2.2vw, 1.6rem); font-weight: 700; display: flex; gap: 12px; align-items: center; white-space: nowrap; transition: border-color .3s, background .3s; }
.ld__pontos li b { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); font-size: .7em; }
.ld__pontos li:nth-child(1) { top: 18%; } .ld__pontos li:nth-child(2) { top: 50%; } .ld__pontos li:nth-child(3) { top: 82%; }
.ld__pontos li.chegou { border-color: var(--acento); }
.ld__pontos li.chegou b { background: var(--acento); color: #1a0d05; }

.pg { padding: 0; height: min(50svh, 380px); min-height: 0; }
.pg__barra { position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; background: var(--bg-3); }
.pg__barra span { display: block; height: 100%; background: var(--acento); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.pg__rolo { height: 100%; overflow-y: auto; padding: 40px clamp(18px, 4vw, 48px) 40vh; display: grid; gap: 18px; align-content: start; max-width: 46rem; overscroll-behavior: contain; }
.pg__rolo h3 { font-size: 2rem; }
.pg__rolo p { color: var(--texto-2); font-size: 1.1rem; }

.vc { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
.vc__c { position: relative; aspect-ratio: 4 / 5; border: 0; padding: 0; background: none; cursor: pointer; perspective: 1000px; text-align: left; }
.vc__f, .vc__v { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s var(--ease); }
.vc__f img { width: 100%; height: 100%; object-fit: cover; }
.vc__f b { position: absolute; left: 16px; bottom: 14px; font-size: 1.5rem; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.vc__v { transform: rotateY(180deg); background: var(--acento); color: #1a0d05; padding: 22px; display: grid; align-content: space-between; }
.vc__v b { font-size: 1.8rem; }
.vc__c.virado .vc__f { transform: rotateY(-180deg); }
.vc__c.virado .vc__v { transform: rotateY(0); }
@media (hover: hover) {
  .vc__c:hover .vc__f { transform: rotateY(-180deg); }
  .vc__c:hover .vc__v { transform: rotateY(0); }
}

/* ================= 3D E FUNDO ================= */
.x3d, .glb { aspect-ratio: 16 / 9; min-height: 0; max-height: 62svh; width: 100%; }
.x3d__c, .glb__c { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.x3d__c:active, .glb__c:active { cursor: grabbing; }
.x3d__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: opacity .35s; }
.x3d.ligado .x3d__poster { opacity: 0; }
.dica3d { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; opacity: .55; pointer-events: none; }
.glb__msg { position: absolute; inset: 0; display: grid; place-items: center; font-size: .95rem; opacity: .6; transition: opacity .3s; pointer-events: none; }
.glb.ligado .glb__msg { opacity: 0; }

.tilt-caixa { perspective: 900px; background: #2a2b30; }
.tilt { position: relative; width: min(64vw, 280px); border-radius: 20px; overflow: hidden; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); box-shadow: 0 30px 60px rgba(0,0,0,.45); touch-action: pan-y; will-change: transform; }
.tilt.mexendo { transition: transform .08s linear; }
.tilt img { width: 100%; }
.tilt__brilho { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.35), transparent 55%); mix-blend-mode: overlay; opacity: var(--go, 0); transition: opacity .3s; pointer-events: none; }

.part, .liq { aspect-ratio: 16 / 9; min-height: 0; max-height: 62svh; width: 100%; background: #0b0b0d; }
.part__c, .liq__c { position: absolute; inset: 0; width: 100%; height: 100%; }
.part__c { touch-action: pan-y; }
.liq { display: grid; align-items: end; padding: clamp(16px, 3vw, 36px); background: #160c20; }
.liq .painel { background: rgba(0,0,0,.3); }
@media (max-width: 700px) { .part, .liq { aspect-ratio: 4 / 5; } }

.dv { display: grid; place-items: center; background: #0e1020; isolation: isolate; }
.dv > span { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; opacity: .75; will-change: transform; }
.dv > span:nth-child(1) { background: radial-gradient(circle, #ff6b2c 0, transparent 65%); left: -20%; top: -30%; animation: dv1 5s ease-in-out infinite alternate; }
.dv > span:nth-child(2) { background: radial-gradient(circle, #6b4bff 0, transparent 65%); right: -25%; top: -10%; animation: dv2 6s ease-in-out infinite alternate; }
.dv > span:nth-child(3) { background: radial-gradient(circle, #19c2a0 0, transparent 65%); left: 10%; bottom: -45%; animation: dv3 7s ease-in-out infinite alternate; }
.dv > span:nth-child(4) { background: radial-gradient(circle, #ff3d7f 0, transparent 65%); right: 0; bottom: -40%; animation: dv1 8s ease-in-out infinite alternate-reverse; }
@keyframes dv1 { to { transform: translate(60%, 45%) scale(1.3); } }
@keyframes dv2 { to { transform: translate(-65%, 50%) scale(.8); } }
@keyframes dv3 { to { transform: translate(50%, -60%) scale(1.25); } }
.dv .painel { background: rgba(0,0,0,.25); }

/* ================= INTERAÇÃO ================= */
.cur { cursor: none; display: grid; place-items: center; }
.cur__alvos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; position: relative; z-index: 2; }
.cur__alvos a { cursor: none; min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--linha); background: var(--bg-3); text-decoration: none; }
.cur__ponto, .cur__anel { position: absolute; left: 0; top: 0; pointer-events: none; border-radius: 50%; z-index: 3; opacity: 0; transition: opacity .2s; }
.cur__ponto { width: 8px; height: 8px; margin: -4px; background: var(--acento); }
.cur__anel { width: 44px; height: 44px; margin: -22px; border: 1.5px solid var(--fg); display: grid; place-items: center; transition: opacity .2s, width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s; }
.cur__anel i { font-style: normal; font-size: .8rem; font-weight: 600; color: #1a0d05; opacity: 0; transition: opacity .2s; }
.cur.dentro .cur__ponto, .cur.dentro .cur__anel { opacity: 1; }
.cur.sobre .cur__anel { width: 84px; height: 84px; margin: -42px; background: var(--acento); border-color: var(--acento); }
.cur.sobre .cur__anel i { opacity: 1; }
.cur.sobre .cur__ponto { opacity: 0; }
.cur__dica { position: absolute; bottom: 14px; font-size: .82rem; color: var(--fg-2); }
@media (hover: none) { .cur, .cur__alvos a { cursor: auto; } .cur__ponto, .cur__anel { display: none; } .cur__dica::after { content: " (no computador)"; } }

.ima { grid-auto-flow: column; gap: 20px; }
@media (max-width: 600px) { .ima { grid-auto-flow: row; } }
.ima__b span { display: inline-block; pointer-events: none; }

.lot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: clamp(16px, 4vw, 48px); align-items: center; min-height: auto; }
.lot__i { display: grid; justify-items: center; gap: 10px; padding: 24px 8px; border-radius: 16px; border: 1px solid var(--linha); background: var(--bg-3); cursor: pointer; transition: transform .16s var(--ease); }
.lot__i:active { transform: scale(.97); }
.lot__i span { width: clamp(72px, 14vw, 120px); aspect-ratio: 1; }
.lot__i b { font-weight: 600; }

.fis { height: min(56svh, 440px); min-height: 0; touch-action: pan-y; user-select: none; }
.fis__msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-2); }
.fis__p { position: absolute; left: 0; top: 0; display: grid; place-items: center; padding: 0 22px; font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.4rem); border-radius: 999px; background: var(--acento); color: #1a0d05; touch-action: none; cursor: grab; white-space: nowrap; will-change: transform; }
.fis__p:active { cursor: grabbing; }
.fis__p--b { background: var(--fg); }
.fis__p--c { background: #6b4bff; color: #fff; }
.fis__p--o { border-radius: 50%; padding: 0; }

.ent { padding: 0; }
.ent img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ent .painel { position: absolute; left: 16px; bottom: 16px; }
.ent__cortina { position: absolute; inset: 0; z-index: 4; background: var(--acento); color: #1a0d05; display: grid; place-items: end start; padding: 16px 22px; transform: translateY(-100%); }
.js .ent__cortina { transform: none; }
.ent__n { font-size: clamp(3.4rem, 11vw, 8rem); font-weight: 800; letter-spacing: -0.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.ent__n::after { content: "%"; font-size: .4em; }

.troca { position: fixed; inset: 0; z-index: 100; background: var(--acento); transform: scaleY(0); transform-origin: 50% 100%; pointer-events: none; }
.troca.cobre { transform: scaleY(1); }

/* ---------- Seleção ---------- */
.sel { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 75; width: min(calc(100% - 24px), 620px); background: #1f2024; border: 1px solid #3a3b42; border-radius: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.sel__barra { display: flex; align-items: center; gap: 8px; padding: 8px; }
.sel__abre { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 8px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel__abre b { display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; border-radius: 999px; background: var(--bg-3); margin-right: 6px; }
.sel.tem .sel__abre b { background: var(--acento); color: #1a0d05; }
.sel__acoes { display: flex; gap: 6px; flex: none; }
.sel__b { min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid #3a3b42; background: var(--bg-3); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; font-size: .9rem; transition: transform .16s var(--ease); }
.sel__b:active { transform: scale(.97); }
.sel__b--zap { background: #25d366; border-color: #25d366; color: #062b14; font-weight: 600; }
.sel:not(.tem) .sel__acoes { opacity: .45; pointer-events: none; }
.sel__lista { padding: 4px 16px 14px; max-height: 46svh; overflow-y: auto; }
.sel__lista ol { padding-left: 1.4em; display: grid; gap: 4px; }
.sel__lista li a { text-decoration: none; }
.sel__lista li code { margin-left: 6px; }
.sel__limpa { margin-top: 12px; background: none; border: 0; color: var(--fg-2); text-decoration: underline; cursor: pointer; padding: 6px 0; }
@media (max-width: 480px) { .sel__b { padding: 0 11px; font-size: .84rem; } }

.aviso { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); z-index: 95; padding: 10px 18px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease); }
.aviso.mostra { opacity: 1; transform: translate(-50%, 0); }

.rodape { padding: 64px var(--gutter) 140px; color: var(--fg-2); font-size: .9rem; display: grid; justify-items: center; gap: 28px; text-align: center; }
.topo-volta { display: grid; justify-items: center; gap: 10px; text-decoration: none; color: var(--fg); font-weight: 600; }
.topo-volta svg { width: 64px; height: 64px; padding: 18px; border-radius: 50%; background: var(--acento); color: #1a0d05; transition: transform .2s var(--ease); }
.topo-volta:hover svg { transform: translateY(-4px); }
.topo-volta:active svg { transform: scale(.94); }

/* ---------- Página 2 (efeito troca-pagina) ---------- */
.p2 { min-height: 100svh; display: grid; place-content: center; gap: 24px; padding: 40px var(--gutter); text-align: center; background: var(--acento); color: #1a0d05; }
.p2 h1 { font-size: clamp(3rem, 12vw, 9rem); letter-spacing: -0.045em; }
.p2 .botao { background: #1a0d05; color: var(--acento); justify-self: center; }

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .mq__trilho, .tc svg, .dv > span, .grao::after, .com-grao body::after { animation: none; }
  .mq__linha { overflow-x: auto; }
  .vc__f, .vc__v { transition: none; }
}

/* ---------- Ajustes de celular ---------- */
@media (max-width: 700px) {
  .x3d, .glb { aspect-ratio: 4 / 5; }
  .tilt-caixa { min-height: 70svh; }
}

/* Sem movimento: os exemplos que só existem animados avisam por que estão parados */
html:not(.js) :is(.part, .liq, .fis, .glb, .lot)::before { content: "Parado porque este aparelho pede menos movimento. Num site de cliente, aqui fica uma imagem fixa."; position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--fg-2); background: var(--bg-2); font-size: .95rem; }
html:not(.js) .glb__msg, html:not(.js) .fis__msg { display: none; }

/* ---------- Filtro por tipo de site, "melhor para" e ideias de uso ---------- */
.filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtro__t { font-size: .9rem; color: var(--fg-2); margin-right: 4px; }
.filtro__b { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--bg-2); cursor: pointer; font-size: .9rem; transition: transform .16s var(--ease), background .2s, border-color .2s; }
.filtro__b:active { transform: scale(.97); }
.filtro__b[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.filtro__n { font-size: .85rem; color: var(--acento); margin-left: 6px; }
.ficha[hidden], .cat[hidden] { display: none; }
.segs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.seg { font-size: .8rem; padding: .15em .65em; border-radius: 999px; background: var(--bg-3); color: var(--acento-2); }
.seg--todos { background: #1f3b26; color: #a8e6b5; }
.ficha__ideias ul { margin: 4px 0 0; padding-left: 1.1em; display: grid; gap: 3px; color: var(--texto-2); }
.ficha__ideias li::marker { color: var(--acento); }

/* ---------- Holografia ---------- */
.holo-caixa { background: radial-gradient(ellipse at 50% 60%, #0c1a26 0%, #05080d 70%); border-color: #18303f; }
.hp, .rx, .hprod, .irid { aspect-ratio: 16 / 9; min-height: 0; max-height: 66svh; width: 100%; }
.irid { background: radial-gradient(ellipse at 50% 55%, #2a2733 0%, #0d0c12 75%); }
.holo__c { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.holo__c:active { cursor: grabbing; }
.hp .holo__c { filter: drop-shadow(1.5px 0 0 rgba(255, 60, 90, .35)) drop-shadow(-1.5px 0 0 rgba(60, 200, 255, .35)); }
.hp::after, .hprod::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(120, 230, 255, .045) 3px 4px); }
.holo__msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-2); font-size: .95rem; pointer-events: none; transition: opacity .3s; }
.ligado .holo__msg { opacity: 0; }
.holo__leg { position: absolute; left: 16px; top: 16px; z-index: 3; list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .86rem; pointer-events: none; }
.hp .holo__leg li { color: #ffcf96; opacity: .75; }
.rx__leg { top: auto; bottom: 16px; counter-reset: rx; max-width: min(70%, 380px); }
.rx__leg li { counter-increment: rx; padding: 6px 12px; border-radius: 10px; background: rgba(5, 12, 18, .7); border: 1px solid #18303f; color: #7da9b8; transition: color .3s, border-color .3s; }
.rx__leg li::before { content: counter(rx) ". "; color: #56e6ff; }
.rx__leg li.on { color: #e8fbff; border-color: #56e6ff; }
.rx__modos { position: absolute; right: 14px; top: 14px; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rx__b { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #2a5566; background: rgba(5, 12, 18, .8); color: #bdeffa; cursor: pointer; font-size: .86rem; transition: transform .16s var(--ease); }
.rx__b:active { transform: scale(.97); }
.rx__b[aria-pressed="true"] { background: #56e6ff; color: #04141a; border-color: #56e6ff; }
@media (max-width: 700px) { .hp, .rx, .hprod, .irid { aspect-ratio: 4 / 5; } .rx__leg { max-width: calc(100% - 32px); font-size: .8rem; } }

/* cartão/ingresso foil (escrito do zero: degradês + mistura de cor seguindo o ponteiro) */
.foil-caixa { background: #14151a; perspective: 900px; }
.foil { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; position: relative; width: min(78vw, 360px); aspect-ratio: 1.6; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #1b1d26, #2b2f3d); box-shadow: 0 30px 60px rgba(0,0,0,.5); touch-action: pan-y; outline-offset: 6px; }
.js .foil { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .4s var(--ease); }
.js .foil.mexendo { transition: transform .06s linear; }
.foil::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, #ff7eb3 0%, #ffd56e 6%, #7dffb0 12%, #56e6ff 18%, #b48cff 24%, #ff7eb3 30%); background-size: 300% 300%; background-position: var(--mx) var(--my); mix-blend-mode: color-dodge; opacity: .55; }
.foil::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 45%); mix-blend-mode: overlay; }
.foil__in { position: relative; z-index: 2; height: 100%; display: grid; align-content: space-between; padding: 20px 22px; color: #f4f6ff; }
.foil__tag { font-size: .72rem; letter-spacing: .3em; opacity: .8; }
.foil__t { font-size: 1.6rem; line-height: 1.05; }
.foil__s { font-size: .85rem; opacity: .85; }
.foil__cod { font: 500 .75rem ui-monospace, Consolas, monospace; opacity: .7; }

/* título holográfico */
.htx { position: relative; isolation: isolate; font-size: clamp(3rem, 10vw, 7rem); font-weight: 800; letter-spacing: -0.03em; color: #9ff0ff; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .htx { color: transparent; background: linear-gradient(100deg, #56e6ff, #b48cff, #ff7eb3, #ffd56e, #7dffb0, #56e6ff) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; animation: htx 6s linear infinite; }
}
.htx::before, .htx::after { content: attr(data-t); position: absolute; inset: 0; z-index: -1; -webkit-background-clip: initial; background: none; mix-blend-mode: screen; }
.htx::before { color: rgba(255, 60, 120, .5); transform: translateX(-3px); animation: htxa 4s steps(1) infinite; }
.htx::after { color: rgba(60, 220, 255, .5); transform: translateX(3px); animation: htxb 4s steps(1) infinite; }
.holo-caixa.caixa--texto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(120, 230, 255, .06) 3px 4px); }
@keyframes htx { to { background-position: 300% 0; } }
@keyframes htxa { 0%, 92% { transform: translateX(-3px); } 94% { transform: translateX(-7px) translateY(1px); } 96% { transform: translateX(-2px); } }
@keyframes htxb { 0%, 92% { transform: translateX(3px); } 94% { transform: translateX(6px) translateY(-1px); } 96% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .htx, .htx::before, .htx::after { animation: none; } }
html:not(.js) :is(.hp, .rx, .hprod, .irid)::before { content: "Parado porque este aparelho pede menos movimento. Num site de cliente, aqui fica uma imagem fixa."; position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--fg-2); background: var(--bg-2); font-size: .95rem; }
html:not(.js) .holo-caixa .holo__msg { display: none; }
.rx { background: radial-gradient(ellipse at 50% 72%, #08183a 0%, #02040b 68%); border-color: #142a52; }

/* raio-X do veículo sobre imagens (base + versões em raio-X na mesma cena) */
.rx2 { padding: 0; min-height: 0; aspect-ratio: 16 / 9; background: #02040b; border-color: #142a52; perspective: 1400px; }
.rx2__cena { position: absolute; inset: 0; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) scale(1.04); transition: transform .6s var(--ease); }
.rx2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rx2__ex { clip-path: inset(0 calc(100% - var(--s, 100%)) 0 0); opacity: 0; transition: opacity .3s; }
.js .rx2 { --s: 0%; }
.rx2[data-modo="eletrico"] .rx2__ex--eletrico, .rx2[data-modo="blindagem"] .rx2__ex--blindagem { opacity: 1; }
.rx2__scan { position: absolute; top: 0; bottom: 0; left: var(--s, 0%); width: 2px; margin-left: -1px; background: linear-gradient(transparent, #bff8ff 20%, #bff8ff 80%, transparent); box-shadow: 0 0 16px 5px rgba(86, 230, 255, .55); opacity: var(--so, 0); pointer-events: none; }
.rx2::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(120, 200, 255, .05) 3px 4px); }
.rx2__leg { display: none; }
.rx2[data-modo="eletrico"] .rx2__leg--eletrico, .rx2[data-modo="blindagem"] .rx2__leg--blindagem { display: grid; }
html:not(.js) .rx2__leg li { color: #e8fbff; border-color: #56e6ff; }
@media (max-width: 700px) {
  .rx2 { aspect-ratio: 3 / 4; }
  .rx2 .rx2__img { object-fit: contain; object-position: 50% 42%; }
  .rx2 .rx__modos { left: 10px; right: 10px; justify-content: center; }
  .rx2 .rx__leg { left: 10px; right: 10px; bottom: 10px; max-width: none; font-size: .78rem; gap: 5px; }
  .rx2 .rx__leg li { padding: 5px 10px; }
}