/* Portfólio v2 · Bandit Studio · catálogo de sites (o HTML vem do montar-v2.mjs; este arquivo é editado à mão)
   Creme, tinta escura e blocos azuis com gema. Fraunces nos títulos (palavra em itálico), Manrope no texto, IBM Plex Mono nos rótulos.
   Aparelhos realistas: .iphone (titânio, ilha dinâmica, botões, reflexo) e .janela (navegador com abas e endereço).
   Sem tracinho decorativo antes/depois de rótulo ou número. */
:root {
  /* 01/11 (Junior): sai o azul + amarelo + creme. Preto, branco e cinza; destaque só nas cores da logo cromada (azul, rosa, laranja). */
  --cromo: linear-gradient(90deg, #2F9BFF 0%, #FF3FA4 52%, #FF8A1F 100%);
  --creme: #F2F2F0;
  --areia: #E7E7E4;
  --linha: #D3D3CF;
  --tinta: #0E0E0E;
  --tinta-2: #55555A;
  --escuro: #0B0B0C;
  --escuro-2: #161618;
  --linha-e: #2A2A2D;
  --claro: #F2F2F0;
  --claro-2: #A0A0A6;
  --azul: #C4126C;
  --azul-forte: #A30E5A;
  --azul-claro: #FF9AD0;
  --gema: #FF4FAE;
  --gema-forte: #E0187F;
  --verde: #3BC77A;
  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --serif: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; /* 01/11: era Fraunces ("parecia jornal recortado") */
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --gutter: 16px;
  --topo: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 900px) { :root { --gutter: 40px; --topo: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: calc(var(--topo) + 64px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--creme); color: var(--tinta); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.escura :focus-visible, .bloco-azul :focus-visible { outline-color: var(--gema); }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinta); color: var(--creme); padding: 10px 14px; border-radius: 8px; }
.pular:focus { top: 12px; }

.caixa { width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; }
.sec { padding: 96px 0; }
@media (min-width: 900px) { .sec { padding: 144px 0; } }
.escura { background: var(--escuro); color: var(--claro); }
.bloco-azul { background: var(--azul); color: var(--claro); }

/* ---------- tipografia ---------- */
.t-capa, .t-sec, .t-final { font-family: var(--serif); font-weight: 600; font-optical-sizing: auto; letter-spacing: -0.035em; text-wrap: balance; }
.t-capa { font-size: clamp(3.3rem, 12.6vw, 7.9rem); line-height: .9; }
.t-sec { font-size: clamp(2.7rem, 9.4vw, 6rem); line-height: .93; }
.t-final { font-size: clamp(3.1rem, 11vw, 8.4rem); line-height: .9; }
.t-capa em, .t-sec em, .t-final em, .lab-ideia-t em { font-style: italic; font-weight: 500; color: var(--azul); }
.escura em, .bloco-azul em { color: var(--gema) !important; }

.rotulo { font: 500 .75rem/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.rotulo b { font-weight: 500; color: var(--azul); }
.escura .rotulo, .bloco-azul .rotulo { color: color-mix(in srgb, var(--claro) 70%, transparent); }
.escura .rotulo b, .bloco-azul .rotulo b { color: var(--gema); }
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); flex: none; }
.ponto.verde { background: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 25%, transparent); }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 50px; padding: 0 1.45em; border-radius: 999px; font: 700 1rem/1 var(--sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; white-space: nowrap; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.i-zap { fill: currentColor; }
.i-seta { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; width: 1.05em !important; height: 1.05em !important; }
.btn-cheio { background: var(--azul); color: #fff; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--azul) 70%, transparent); }
.btn-cheio:hover { background: var(--azul-forte); transform: translateY(-1px); }
.escura .btn-cheio, .bloco-azul .btn-cheio { background: var(--gema); color: var(--tinta); box-shadow: 0 10px 24px -10px rgba(255, 197, 61, .55); }
.escura .btn-cheio:hover, .bloco-azul .btn-cheio:hover { background: #FFD46B; }
.btn-claro { background: var(--claro); color: var(--tinta); }
.btn-claro:hover { background: #fff; }
.btn-contorno { border-color: currentColor; color: inherit; background: transparent; }
.btn-contorno:hover { background: var(--tinta); color: var(--creme); border-color: var(--tinta); }
.escura .btn-contorno:hover, .bloco-azul .btn-contorno:hover { background: var(--claro); color: var(--tinta); border-color: var(--claro); }
.btn-grande { min-height: 58px; font-size: 1.06rem; padding: 0 1.65em; }
.btn-pequeno { min-height: 40px; padding: 0 1.05em; font-size: .9rem; box-shadow: none; }
.btn:active { transform: scale(.98); }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, #0a0a0a 86%, transparent); color: var(--claro); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .25s; }
.topo.rolou { border-bottom-color: rgba(255, 255, 255, .08); }
.topo-dentro { height: var(--topo); display: flex; align-items: center; gap: 24px; }
.marca { display: flex; align-items: center; text-decoration: none; }
.marca img { height: 44px; width: auto; filter: drop-shadow(0 4px 14px rgba(255, 63, 164, .25)); }
@media (min-width: 900px) { .marca img { height: 54px; } }
.topo-nav { display: none; margin-left: auto; gap: 26px; }
.topo-nav a { font-size: .92rem; font-weight: 600; text-decoration: none; color: color-mix(in srgb, var(--claro) 72%, transparent); transition: color .2s; }
.topo-nav a:hover { color: #fff; }
.topo .btn { margin-left: auto; }
@media (min-width: 1080px) { .topo-nav { display: flex; } .topo .btn { margin-left: 8px; } }

/* =================== APARELHOS =================== */
/* iPhone: .iphone é o container (as medidas em cqw seguem a largura dele) */
.iphone { position: relative; container-type: inline-size; }
.ip-corpo { position: relative; border-radius: 17cqw; padding: 1.25cqw;
  background: linear-gradient(140deg, #E2DFD9 0%, #8A8680 12%, #45423E 28%, #A39F98 50%, #3B3936 68%, #B9B5AE 86%, #6B6863 100%);
  box-shadow: inset 0 0 0 .35cqw rgba(255, 255, 255, .45), inset 0 0 0 .9cqw rgba(0, 0, 0, .15), 0 2.5cqw 4cqw -1cqw rgba(20, 18, 15, .35), 0 14cqw 22cqw -8cqw rgba(20, 18, 15, .55); }
.ip-borda { border-radius: 15.8cqw; padding: 3.1cqw; background: #050505; box-shadow: inset 0 0 0 .45cqw #1E1E1E; }
.ip-tela { position: relative; border-radius: 12.8cqw; overflow: hidden; aspect-ratio: 390 / 844; background: #000; transform: translateZ(0); }
.ip-ilha { position: absolute; z-index: 3; top: 3cqw; left: 50%; width: 30cqw; height: 8.8cqw; transform: translateX(-50%); border-radius: 99px; background: #000; box-shadow: 0 0 0 .3cqw rgba(255, 255, 255, .04); }
.ip-brilho { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .05) 24%, rgba(255, 255, 255, 0) 38%); }
.ip-bt { position: absolute; z-index: -1; width: 1.6cqw; border-radius: 1cqw; background: linear-gradient(90deg, #4E4B47, #B4B0A9 55%, #6C6964); }
.ip-acao { left: -.95cqw; top: 17%; height: 5.5%; }
.ip-vol1 { left: -.95cqw; top: 25.5%; height: 9.5%; }
.ip-vol2 { left: -.95cqw; top: 37%; height: 9.5%; }
.ip-liga { right: -.95cqw; top: 28%; height: 14%; }
/* titânio grafite, pras seções escuras */
.ip-grafite .ip-corpo { background: linear-gradient(140deg, #8F8B85 0%, #3E3C39 14%, #1F1E1C 32%, #57544F 52%, #1C1B19 70%, #6E6A64 88%, #2B2A27 100%); box-shadow: inset 0 0 0 .35cqw rgba(255, 255, 255, .22), 0 2.5cqw 4cqw -1cqw rgba(0, 0, 0, .5), 0 14cqw 24cqw -8cqw rgba(0, 0, 0, .8); }
.ip-grafite .ip-bt { background: linear-gradient(90deg, #2A2927, #6B6863 55%, #33312E); }

.tela { position: relative; overflow: hidden; background: #000; }
.tela img, .tela video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tela video { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.tela.rodando video { opacity: 1; }

/* janela de navegador: .janela é o container; tema escuro por padrão, .jn-claro nas seções claras */
.janela { position: relative; container-type: inline-size; }
.jn-corpo { border-radius: clamp(8px, 1.2cqw, 14px); overflow: hidden; background: #202020;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1.5cqw 3cqw -1cqw rgba(0, 0, 0, .35), 0 6cqw 12cqw -4cqw rgba(0, 0, 0, .55); }
.jn-abas { display: flex; align-items: flex-end; gap: .9cqw; height: max(22px, 3.9cqw); padding: 0 1.4cqw; background: #1B1B1B; }
.jn-luzes { display: flex; gap: max(4px, .75cqw); align-self: center; margin-right: 1.2cqw; }
.jn-luzes i { width: max(7px, 1.05cqw); height: max(7px, 1.05cqw); border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .25); }
.jn-luzes i:nth-child(2) { background: #FEBC2E; }
.jn-luzes i:nth-child(3) { background: #28C840; }
.jn-aba { display: flex; align-items: center; gap: max(4px, .8cqw); height: 80%; min-width: 0; width: 30%; padding: 0 max(6px, 1.2cqw); background: #353535; border-radius: max(5px, .9cqw) max(5px, .9cqw) 0 0; color: #ECECEC; font: 500 max(7px, 1.05cqw)/1 var(--sans); }
.jn-aba b { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-fav { width: max(7px, 1.2cqw); height: max(7px, 1.2cqw); border-radius: 28%; background: var(--c, #888); flex: none; }
.jn-x, .jn-nova { color: #9A9A9A; font: 400 max(8px, 1.3cqw)/1 var(--sans); }
.jn-nova { align-self: center; padding-left: .4cqw; }
.jn-barra { display: flex; align-items: center; gap: max(6px, 1.3cqw); height: max(24px, 4.1cqw); padding: 0 1.4cqw; background: #353535; border-bottom: 1px solid #111; }
.jn-nav { display: flex; gap: max(4px, .9cqw); }
.jn-nav svg, .jn-url svg { width: max(8px, 1.35cqw); height: max(8px, 1.35cqw); fill: none; stroke: #A9A9A9; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jn-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: max(4px, .7cqw); height: 70%; padding: 0 max(8px, 1.3cqw); border-radius: 99px; background: #262626; color: #E2E2E2; font: 400 max(7.5px, 1.1cqw)/1 var(--sans); }
.jn-url span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-menu { display: flex; flex-direction: column; gap: max(1.5px, .25cqw); }
.jn-menu i { width: max(2.5px, .38cqw); height: max(2.5px, .38cqw); border-radius: 50%; background: #A9A9A9; }
.jn-tela { background: #111; }
.jn-tela img { width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top; }
.jn-claro .jn-corpo { background: #F7F6F3; box-shadow: 0 0 0 1px rgba(20, 18, 15, .12), 0 1.5cqw 3cqw -1cqw rgba(20, 18, 15, .2), 0 6cqw 12cqw -4cqw rgba(20, 18, 15, .38); }
.jn-claro .jn-abas { background: #DEDBD5; }
.jn-claro .jn-aba { background: #F7F6F3; color: #2A2A2A; }
.jn-claro .jn-x, .jn-claro .jn-nova { color: #8A8780; }
.jn-claro .jn-barra { background: #F7F6F3; border-bottom-color: #E3E0DA; }
.jn-claro .jn-nav svg, .jn-claro .jn-url svg { stroke: #77736C; }
.jn-claro .jn-url { background: #ECE9E4; color: #2E2D2A; }
.jn-claro .jn-menu i { background: #77736C; }

/* composição: navegador + iPhone saindo da borda, com perspectiva; --p vem do JS (paralaxe) */
.compo { position: relative; perspective: 1800px; padding: 0 11% 9% 0; }
.compo .janela { transform: rotateY(-8deg) rotateX(2.5deg); transform-origin: 0 50%; }
.compo-cel { position: absolute !important; z-index: 2; right: 0; bottom: 0; width: 27%; transform: translate3d(0, calc(var(--p, 0) * -34px), 0) rotate(3deg); }
.compo-esq { padding: 0 0 9% 11%; }
.compo-esq .janela { transform: rotateY(8deg) rotateX(2.5deg); transform-origin: 100% 50%; }
.compo-esq .compo-cel { right: auto; left: 0; transform: translate3d(0, calc(var(--p, 0) * -34px), 0) rotate(-3deg); }
@media (max-width: 699px) {
  .compo .janela { transform: rotateY(-5deg) rotateX(2deg); }
  .compo-esq .janela { transform: rotateY(5deg) rotateX(2deg); }
  .compo-cel { width: 30%; }
}

/* =================== CAPA (01/11: pôster preto e branco, ele na frente do nome) =================== */
.capa { background: #050505; color: var(--claro); overflow: hidden; padding-bottom: 8px; }
.capa-cena { position: relative; height: calc(100svh - var(--topo) - 150px); min-height: 560px; max-height: 860px; overflow: hidden; isolation: isolate; }
.capa-luz { position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 55% at 50% 18%, rgba(255, 255, 255, .16), transparent 70%), radial-gradient(70% 40% at 50% 100%, rgba(45, 63, 227, .18), transparent 70%); }
.capa-nome { position: absolute; inset: 0; z-index: 1; margin: 0; pointer-events: none; }
/* A: a logo inteira atrás da cabeça */
.capa-logo { position: absolute; left: 50%; top: 9%; width: min(96vw, 1320px); max-width: none; height: auto; transform: translate3d(-50%, calc(var(--p, 0) * -14px), 0); filter: drop-shadow(0 0 40px rgba(255, 63, 164, .28)) drop-shadow(0 0 90px rgba(53, 120, 255, .22)); }
.capa-eu { position: absolute; z-index: 2; left: 50%; bottom: 0; height: auto; width: min(118vw, 640px); max-width: none; transform: translate3d(-57%, calc(var(--p, 0) * 10px), 0);
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 99%); mask-image: linear-gradient(180deg, #000 76%, transparent 99%); }
.capa-base { position: absolute; z-index: 3; left: 0; right: 0; bottom: 26px; display: grid; gap: 14px; }
.capa-frase { font: 400 clamp(1.7rem, 7vw, 2.4rem)/1 var(--display); text-transform: uppercase; max-width: 15ch; text-shadow: 0 2px 20px rgba(0, 0, 0, .9); }
.capa-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.capa-acoes .btn { flex: 1 1 auto; }
.capa .btn-cheio { background: var(--gema); color: var(--tinta); box-shadow: 0 10px 30px -10px rgba(255, 197, 61, .6); }
.capa .btn-cheio:hover { background: #FFD46B; }
.capa .btn-contorno { background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.capa .btn-contorno:hover { background: var(--claro); color: var(--tinta); border-color: var(--claro); }
.capa-assina { display: none; font: 500 .74rem/1.7 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--claro) 70%, transparent); text-align: right; }
@media (max-width: 899px) { .capa-cena { height: calc(100svh - var(--topo) - 96px); min-height: 600px; } .capa-logo { top: 3%; } .capa-eu { bottom: 150px; width: min(108vw, 600px); } .capa-base { bottom: 20px; } }
@media (min-width: 560px) { .capa-acoes .btn { flex: 0 0 auto; } }
@media (min-width: 900px) {
  .capa-logo { top: 14%; width: min(70vw, 1020px); }
  .capa-eu { width: auto; height: 93%; }
  .capa-base { grid-template-columns: 1fr auto; align-items: end; bottom: 40px; }
  .capa-assina { display: block; }
}
.capa .numeros { border-top-color: rgba(255, 255, 255, .5); }
.capa .numeros li { border-color: rgba(255, 255, 255, .12); }
.capa .numeros span { color: color-mix(in srgb, var(--claro) 66%, transparent); }
.capa .numeros li:last-child b { color: var(--gema); }

.numeros { display: grid; grid-template-columns: 1fr 1fr; margin-top: 64px; border-top: 1.5px solid var(--tinta); }
.numeros li { padding: 22px 14px 26px 16px; border-left: 1px solid var(--linha); }
.numeros li:nth-child(odd) { border-left: 0; padding-left: 0; }
.numeros li:nth-child(n+3) { border-top: 1px solid var(--linha); }
.numeros b { display: block; font: 600 clamp(2.6rem, 9vw, 3.8rem)/1 var(--serif); letter-spacing: -.03em; }
.numeros li:last-child b { font-style: italic; font-weight: 500; color: var(--azul); }
.numeros span { display: block; margin-top: 10px; font-size: .88rem; line-height: 1.45; color: var(--tinta-2); }
@media (min-width: 900px) {
  .numeros { grid-template-columns: repeat(4, 1fr); margin-top: 72px; }
  .numeros li, .numeros li:nth-child(odd) { border-left: 1px solid var(--linha); padding: 28px 24px 34px; border-top: 0; }
  .numeros li:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- faixa de ramos ---------- */
.faixa { background: var(--azul); color: var(--claro); overflow: hidden; padding: 22px 0; margin-top: 64px; }
.faixa-trilho { display: flex; width: max-content; }
.anima .faixa-trilho { animation: correr 70s linear infinite; }
.faixa ul { display: flex; align-items: center; }
.faixa li { display: flex; align-items: center; gap: 34px; padding-right: 34px; font: italic 500 clamp(1.7rem, 4vw, 2.3rem)/1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.faixa li i { width: 9px; height: 9px; border-radius: 50%; background: var(--gema); }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- cabeçalho das seções ---------- */
.s-cab { display: grid; gap: 20px; margin-bottom: 56px; }
.s-sub { margin-top: 24px; max-width: 56ch; font-size: 1.08rem; line-height: 1.65; color: var(--tinta-2); }
.escura .s-sub { color: var(--claro-2); }
.bloco-azul .s-sub { color: color-mix(in srgb, var(--claro) 80%, transparent); }
@media (min-width: 960px) {
  .s-cab { grid-template-columns: 200px 1fr; gap: 0 40px; margin-bottom: 88px; }
  .s-cab > .rotulo { padding-top: 1.6em; }
}

/* =================== 01 CLIENTES =================== */
.abas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 44px; padding: 2px var(--gutter); }
.abas::-webkit-scrollbar { display: none; }
.aba { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linha-e); background: var(--escuro-2); color: var(--claro-2); font-size: .95rem; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.aba b { font: 500 .7rem/1 var(--mono); color: var(--gema); }
.aba:hover { color: var(--claro); border-color: #4A463F; }
.aba[aria-selected="true"] { background: var(--gema); color: var(--tinta); border-color: var(--gema); }
.aba[aria-selected="true"] b { color: var(--tinta); }
.cli-painel { display: grid; gap: 64px; }
.cli-painel[hidden] { display: none; }
.selo-ar { display: inline-flex; align-items: center; gap: 10px; font: 500 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--linha-e); border-radius: 999px; padding: 10px 14px; color: var(--claro); }
.ficha h3 { margin: 22px 0 14px; font: 600 clamp(2.5rem, 8vw, 4rem)/.98 var(--serif); letter-spacing: -.03em; }
.ficha-resumo { color: var(--claro-2); font-size: 1.04rem; max-width: 48ch; }
.ficha-lista { margin: 28px 0 32px; border-bottom: 1px solid var(--linha-e); }
.ficha-lista div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid var(--linha-e); font-size: .93rem; }
.ficha-lista dt { color: var(--claro-2); flex: none; }
.ficha-lista dd { text-align: right; overflow-wrap: anywhere; font-weight: 500; }
.ficha-nota { margin-top: 16px; font-size: .82rem; color: var(--claro-2); }
@media (min-width: 1000px) { .cli-painel { grid-template-columns: 1.5fr 1fr; align-items: center; gap: 72px; } }

/* =================== 02 LABORATÓRIO =================== */
.labs { display: grid; gap: 120px; }
.lab { display: grid; gap: 64px; align-items: center; }
.lab-cena { position: relative; isolation: isolate; border-radius: 28px; padding: 10% 7% 8%;
  background: radial-gradient(120% 100% at 15% 0%, color-mix(in srgb, var(--cor) 65%, white) 0%, var(--cor) 42%, color-mix(in srgb, var(--cor) 55%, #120f0b) 100%);
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--cor) 70%, black); }
.lab-luz { position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: .35; background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 70%); mask-image: linear-gradient(160deg, #000 0%, transparent 70%); }
.lab .compo-cel { bottom: -18%; }
.lab-clipe { position: absolute; z-index: 3; left: -6%; bottom: -16%; width: 25%; display: none; transform: rotate(-4deg) translate3d(0, calc(var(--p, 0) * 22px), 0); }
.lab-clipe .tela { aspect-ratio: 480 / 600; border-radius: 16px; border: 5px solid var(--creme); box-shadow: 0 24px 40px -16px rgba(20, 18, 15, .55); }
.lab-clipe-rotulo { position: absolute; top: -14px; left: 14px; font: 500 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--tinta); color: var(--claro); padding: 7px 10px; border-radius: 99px; }
.compo-esq .lab-clipe { left: auto; right: -6%; transform: rotate(4deg) translate3d(0, calc(var(--p, 0) * 22px), 0); }
.lab-num { font: 500 .8rem/1 var(--mono); letter-spacing: .14em; color: var(--azul); }
.lab-texto h3 { margin: 18px 0 14px; font: 600 clamp(2.4rem, 7vw, 3.9rem)/.98 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.lab-proj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .92rem; color: var(--tinta-2); }
.lab-proj .selo { color: var(--tinta-2); }
.lab-proj .selo.cliente { color: #1E8A4F; }
.lab-problema { margin: 28px 0 22px; padding: 4px 0 4px 20px; border-left: 4px solid color-mix(in srgb, var(--cor) 85%, black); }
.lab-problema b { display: block; font: 700 1.12rem/1.35 var(--sans); }
.lab-problema p { margin-top: 8px; color: var(--tinta-2); font-size: 1.02rem; max-width: 46ch; }
.lab-pra { font: italic 500 1.2rem/1.4 var(--serif); max-width: 40ch; }
.lab-acoes { margin-top: 28px; }
.lab-ideia { margin-top: 140px; padding: 48px 28px; border-radius: 28px; background: var(--escuro); color: var(--claro); display: grid; gap: 18px; justify-items: start; }
.lab-ideia-t { font: 600 clamp(2rem, 6vw, 3.4rem)/1 var(--serif); letter-spacing: -.03em; max-width: 20ch; }
.lab-ideia .rotulo { color: var(--claro-2); }
.lab-ideia em { color: var(--gema); }
.lab-ideia .btn { margin-top: 10px; background: var(--gema); color: var(--tinta); }
@media (min-width: 700px) { .lab-clipe { display: block; } }
@media (min-width: 1000px) {
  .labs { gap: 180px; }
  .lab { grid-template-columns: 1.3fr 1fr; gap: 80px; }
  .lab-inv .lab-cena { order: 2; }
  .lab-ideia { grid-template-columns: 1fr auto; align-items: end; padding: 64px; }
  .lab-ideia .rotulo { grid-column: 1 / -1; }
}

/* =================== 03 PRÉVIAS =================== */
.trilho-bloco { position: relative; }
.trilho-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.setas { display: flex; gap: 10px; }
.seta { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; cursor: pointer; display: grid; place-items: center; transition: background-color .2s, color .2s, opacity .2s; }
.seta svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.seta:hover:not([disabled]) { background: var(--tinta); color: var(--creme); border-color: var(--tinta); }
.escura .seta:hover:not([disabled]) { background: var(--gema); color: var(--tinta); border-color: var(--gema); }
.seta[disabled] { opacity: .28; cursor: default; }
@media (max-width: 599px) { .setas { display: none; } }
.trilho { display: grid; grid-auto-flow: column; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 28px; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
.trilho::-webkit-scrollbar { display: none; }
.trilho > li { scroll-snap-align: start; }
@media (min-width: 900px) { .trilho { gap: 32px; } }

.prev-trilho { grid-auto-columns: min(62vw, 268px); }
.prev a, .p-card a { display: block; text-decoration: none; color: inherit; }
.prev .iphone, .p-card .iphone { transition: transform .35s var(--ease); }
.prev a:hover .iphone, .p-card a:hover .iphone { transform: translateY(-8px) rotate(-1deg); }
.prev-nome { display: block; margin-top: 26px; font: 600 1.7rem/1.05 var(--serif); letter-spacing: -.02em; }
.prev-meta { display: block; margin-top: 6px; font-size: .86rem; color: var(--claro-2); }
.prev-abrir { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: 500 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gema); }
.prev a:hover .prev-abrir { text-decoration: underline; text-underline-offset: 4px; }
.p-aviso { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--linha-e); font-size: .86rem; color: var(--claro-2); max-width: 82ch; }
.p-aviso b { color: var(--claro); font-weight: 600; }

/* =================== 04 CATÁLOGO =================== */
.cat-capa { padding: 104px 0 88px; }
@media (min-width: 900px) { .cat-capa { padding: 144px 0 112px; } }
.cat-indice { display: grid; column-gap: 40px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.cat-indice a { display: grid; grid-template-columns: 46px 1fr auto; align-items: baseline; gap: 12px; padding: 17px 0; border-top: 1px solid rgba(255, 255, 255, .22); text-decoration: none; transition: color .2s; }
.ind-n { font: 500 .8rem/1 var(--mono); color: var(--gema); }
.ind-t { font: 500 clamp(1.5rem, 4.6vw, 1.9rem)/1.1 var(--serif); letter-spacing: -.02em; transition: transform .3s var(--ease), color .2s; }
.ind-c { font: 500 .74rem/1 var(--mono); letter-spacing: .06em; color: rgba(255, 255, 255, .7); text-align: right; }
.cat-indice a:hover .ind-t { transform: translateX(6px); color: var(--gema); }
@media (min-width: 700px) { .cat-indice { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cat-indice { grid-template-columns: 1fr 1fr 1fr; } }
.chips { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 32px calc(-1 * var(--gutter)) 0; padding: 2px var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chips .rotulo { flex: none; margin-right: 6px; }
.chip { flex: none; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: var(--claro); font-size: .92rem; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.chip span { font: 500 .72rem/1 var(--mono); margin-left: 4px; opacity: .75; }
.chip:hover { border-color: var(--claro); }
.chip[aria-pressed="true"] { background: var(--gema); color: var(--tinta); border-color: var(--gema); }

.cat-barra { position: sticky; top: var(--topo); z-index: 40; background: color-mix(in srgb, var(--creme) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linha); }
.cat-barra-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter); }
.cat-barra-chips::-webkit-scrollbar { display: none; }
.cat-barra a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 99px; font-size: .86rem; font-weight: 600; color: var(--tinta-2); text-decoration: none; transition: background-color .2s, color .2s; }
.cat-barra a b { font: 500 .68rem/1 var(--mono); color: var(--azul); }
.cat-barra a:hover { color: var(--tinta); }
.cat-barra a.ativo { background: var(--tinta); color: var(--creme); }
.cat-barra a.ativo b { color: var(--gema); }

.cap { padding: 72px 0 80px; }
.cap-areia { background: var(--areia); }
.cap-cab { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; align-items: end; margin-bottom: 52px; }
.cap-num { font: italic 800 clamp(4.4rem, 15vw, 9.5rem)/.78 var(--serif); letter-spacing: -.05em; color: var(--azul); }
@media (max-width: 899px) { .cap-cab { grid-template-columns: 1fr; } .cap-num { font-size: 4.6rem; } }
.cap-cab h3 { font: 600 clamp(2.3rem, 7vw, 4.6rem)/.95 var(--serif); letter-spacing: -.035em; }
.cap-linha { margin-top: 12px; color: var(--tinta-2); max-width: 52ch; font-size: 1.02rem; }
.cap-conta { grid-column: 1 / -1; font: 500 .74rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); padding-top: 14px; border-top: 1.5px solid var(--tinta); }
@media (min-width: 900px) {
  .cap { padding: 96px 0 104px; }
  .cap-cab { grid-template-columns: auto 1fr auto; gap: 0 32px; margin-bottom: 56px; }
  .cap-conta { grid-column: auto; border-top: 0; padding: 0 0 .6em; text-align: right; }
}
.cap-destaque { display: grid; gap: 48px; align-items: center; }
.cap-ficha .selo { margin-top: 14px; }
.cap-ficha h4 { margin: 12px 0 6px; font: 600 clamp(2.2rem, 6vw, 3.2rem)/1 var(--serif); letter-spacing: -.03em; }
.cap-meta { font-size: .9rem; color: var(--tinta-2); }
.cap-resumo { margin: 18px 0 26px; padding-left: 18px; border-left: 4px solid var(--cor); font-size: 1rem; color: var(--tinta-2); max-width: 46ch; }
@media (min-width: 1000px) {
  .cap-destaque { grid-template-columns: 1.55fr 1fr; gap: 72px; }
  .cap-areia .cap-destaque { grid-template-columns: 1fr 1.55fr; }
  .cap-areia .cap-destaque .compo { order: 2; }
}
.cap .trilho-bloco { margin-top: 56px; }
.p-trilho { grid-auto-columns: min(40vw, 176px); }
.p-info { display: flex; flex-direction: column; gap: 5px; padding-top: 20px; }
.p-nome { font: 600 1.3rem/1.08 var(--serif); letter-spacing: -.02em; }
.p-meta { font-size: .82rem; line-height: 1.4; color: var(--tinta-2); }
.p-card[hidden] { display: none; }
.p-vazio { padding: 8px 0; color: var(--tinta-2); font-size: .92rem; }
.selo { display: inline-flex; align-items: center; gap: 7px; font: 500 .66rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.selo.cliente { color: #1E8A4F; }
.selo.cliente i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.selo.demo { color: var(--tinta-2); }
.escura .selo.cliente { color: #8BE3B1; }
.escura .selo.demo { color: var(--claro-2); }
.cat-aviso { color: var(--tinta-2); border-top-color: var(--linha); margin: 0; padding: 28px 0 40px; }
.cat-aviso b { color: var(--tinta); }

/* =================== 05 COMO FUNCIONA (bloco azul) =================== */
.passos { display: grid; border-top: 1.5px solid var(--claro); }
.passos li { padding: 26px 0 30px; }
.passos li + li { border-top: 1px solid rgba(255, 255, 255, .22); }
.p-n { display: block; font: italic 600 3.6rem/1 var(--serif); letter-spacing: -.03em; color: var(--gema); }
.passos h3 { margin: 18px 0 8px; font-size: 1.12rem; font-weight: 800; }
.passos p { font-size: .98rem; line-height: 1.6; color: color-mix(in srgb, var(--claro) 80%, transparent); max-width: 40ch; }
.como-cta { margin-top: 56px; }
@media (max-width: 699px) {
  .passos li { display: grid; grid-template-columns: 72px 1fr; align-items: start; }
  .p-n { grid-row: span 2; font-size: 3rem; }
  .passos h3 { margin: 6px 0 6px; }
}
@media (min-width: 700px) {
  .passos { grid-template-columns: 1fr 1fr; }
  .passos li { padding-right: 28px; }
  .passos li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .22); padding-left: 28px; }
  .passos li:nth-child(2) { border-top: 0; }
}
@media (min-width: 1100px) {
  .passos { grid-template-columns: repeat(4, 1fr); }
  .passos li, .passos li + li { border-top: 0; }
  .passos li + li { border-left: 1px solid rgba(255, 255, 255, .22); padding-left: 28px; }
}

/* =================== 06 SOBRE =================== */
.s-cab .sobre-grade { display: grid; gap: 32px; }
.sobre-texto { display: grid; gap: 16px; font-size: 1.08rem; line-height: 1.7; color: var(--tinta-2); max-width: 56ch; }
.sobre-fatos { margin-top: 12px; border-bottom: 1px solid var(--linha); }
.sobre-fatos div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--linha); font-size: .94rem; }
.sobre-fatos dt { font: 500 .74rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sobre-fatos dd { color: var(--tinta); font-weight: 600; text-align: right; }
#sobre .s-cab { margin-bottom: 0; }
@media (min-width: 960px) {
  .s-cab .sobre-grade { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .sobre-texto { padding-top: 12px; }
}

/* =================== CTA FINAL =================== */
.final { padding: 112px 0 120px; }
.t-final { margin: 28px 0 44px; }
.final-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.final-fone { font: 400 1.05rem/1 var(--mono); color: var(--claro-2); text-decoration: none; }
.final-fone:hover { color: var(--claro); }
@media (min-width: 900px) { .final { padding: 170px 0; } }

/* ---------- rodapé ---------- */
.rodape { background: var(--escuro); color: var(--claro-2); border-top: 1px solid var(--linha-e); padding: 28px 0 40px; font-size: .84rem; line-height: 1.5; }
.rodape-grade { display: grid; gap: 12px; }
.assinatura { justify-self: start; font: 700 1.15rem/1 var(--serif); letter-spacing: -.02em; color: var(--claro-2); text-decoration: none; opacity: .8; transition: opacity .2s, color .2s; }
.assinatura i { font-weight: 500; }
.assinatura:hover { opacity: 1; color: var(--gema); }
@media (min-width: 900px) {
  .rodape-grade { grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
  .rodape-aviso { text-align: center; }
}

/* ---------- entrada ao rolar (só com JS e sem movimento reduzido) ---------- */
.anima .rv { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.anima .rv.visto { opacity: 1; transform: none; }
.anima .rv-cena { opacity: 0; transform: translateY(48px) scale(.97); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.anima .rv-cena.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-cena { opacity: 1 !important; transform: none !important; }
  .faixa-trilho { animation: none !important; }
}

/* ---------- catálogo folheável: um capítulo por vez (o JS esconde os outros; sem JS aparecem todos) ---------- */
.cap[hidden] { display: none; }
.cap-pag { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; padding-top: 28px; border-top: 1.5px solid var(--tinta); }
.cap-pag a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; padding: 6px 0; }
.cap-pag .rotulo { display: inline-flex; align-items: center; gap: 6px; }
.cap-pag .rotulo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cap-pag b { font: 600 clamp(1.25rem, 4.6vw, 2.2rem)/1.05 var(--serif); letter-spacing: -.025em; transition: color .2s; }
.cap-pag a:hover b { color: var(--azul); }
.cap-prox { grid-column: 2; text-align: right; align-items: flex-end; }

/* =================== 01/11: tipografia de pôster no lugar da serifada =================== */
.t-capa, .t-sec, .t-final, .ficha h3, .lab-texto h3, .lab-ideia-t, .cap-num, .cap-cab h3, .cap-ficha h4, .numeros b, .p-n {
  font-family: var(--display); font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: 0; }
.t-sec { line-height: .95; }
.ficha h3, .lab-texto h3, .cap-cab h3, .cap-ficha h4 { line-height: 1; }
.t-capa em, .t-sec em, .t-final em, .lab-ideia-t em { font-style: normal; font-weight: 400; }
.faixa li { font-family: var(--display); font-style: normal; text-transform: uppercase; letter-spacing: .01em; }
.lab-pra { font: 600 1.08rem/1.5 var(--sans); }
.numeros li:last-child b { font-style: normal; }

/* =================== 01/11: paleta da logo (preto e branco + cromado) no lugar de azul/amarelo =================== */
.bloco-azul, .faixa { background: #0B0B0C; color: var(--claro); }
.bloco-azul { border-top: 1px solid var(--linha-e); border-bottom: 1px solid var(--linha-e); }
.faixa { border-block: 1px solid var(--linha-e); }
.faixa li i { background: var(--cromo); }
.t-capa em, .t-sec em, .t-final em, .lab-ideia-t em, .lab-ideia em, .escura em, .bloco-azul em,
.cap-num, .p-n, .capa .numeros li:last-child b, .numeros li:last-child b {
  background: var(--cromo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; }
.btn-cheio, .escura .btn-cheio, .bloco-azul .btn-cheio, .capa .btn-cheio, .lab-ideia .btn { background: linear-gradient(90deg, #FF3FA4, #FF7A1F); color: #fff; box-shadow: 0 10px 28px -12px rgba(255, 63, 164, .7); }
.btn-cheio:hover, .escura .btn-cheio:hover, .bloco-azul .btn-cheio:hover, .capa .btn-cheio:hover, .lab-ideia .btn:hover { background: linear-gradient(90deg, #FF5FB4, #FF8E3F); }
.aba[aria-selected="true"], .chip[aria-pressed="true"], .escura .seta:hover:not([disabled]) { background: var(--claro); color: var(--tinta); border-color: var(--claro); }
.aba b, .ind-n, .escura .rotulo b, .bloco-azul .rotulo b, .cat-barra a.ativo b { color: #FF6FB8; }
.cat-indice a:hover .ind-t, .assinatura:hover { color: #fff; }
.capa-luz { background: radial-gradient(40% 55% at 50% 18%, rgba(255, 255, 255, .14), transparent 70%), radial-gradient(70% 40% at 50% 100%, rgba(255, 63, 164, .12), transparent 70%); }

/* =================== 01/11: vitrine de celulares emendada na capa =================== */
.vitrine { position: relative; z-index: 4; margin-top: -10px; }
.vit-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: color-mix(in srgb, var(--claro) 70%, transparent) !important; }
.vit-janela { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.vit-trilho { display: flex; width: max-content; }
.anima .vit-trilho { animation: correr 170s linear infinite; } /* bem devagar: dá tempo de ver o site rolando em cada celular */
.anima .vit-janela:hover .vit-trilho, .anima .vit-janela:focus-within .vit-trilho { animation-play-state: paused; }
.calmo .vit-janela { overflow-x: auto; }
.vit-trilho ul { display: flex; gap: 22px; padding: 0 11px 8px; }
.vit-trilho li { flex: none; width: 168px; }
.vit-trilho a { display: block; text-decoration: none; color: var(--claro); }
.vit-trilho .iphone { transition: transform .35s var(--ease); }
.vit-trilho a:hover .iphone, .vit-trilho a:focus-visible .iphone { transform: translateY(-10px); }
.vit-nome { display: block; margin-top: 14px; font: 700 .95rem/1.2 var(--sans); }
.vit-ramo { display: block; margin-top: 4px; font: 500 .68rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--claro-2); }
@media (min-width: 900px) { .vit-trilho li { width: 200px; } .vit-trilho ul { gap: 30px; padding: 0 15px 8px; } }

/* =================== 01/11: aura de fumaça rosa, contorno na logo e capa afastada no celular =================== */
.capa-logo { filter: drop-shadow(0 0 1.5px rgba(255, 140, 210, .95)) drop-shadow(0 0 1px rgba(255, 255, 255, .6)) drop-shadow(0 10px 22px rgba(0, 0, 0, .95)) drop-shadow(0 0 46px rgba(255, 63, 164, .4)); }
.capa-eu { filter: drop-shadow(0 0 10px rgba(255, 63, 164, .55)) drop-shadow(0 0 34px rgba(255, 63, 164, .3)); }
.capa-fumaca { position: absolute; z-index: 1; left: 50%; bottom: 0; width: 760px; height: 92%; transform: translateX(-50%); pointer-events: none; }
.capa-fumaca b { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 63, 164, .55), rgba(255, 63, 164, .18) 55%, transparent); filter: blur(28px); mix-blend-mode: screen; opacity: .75; }
.capa-fumaca b:nth-child(1) { width: 46%; height: 42%; left: 4%; bottom: 8%; }
.capa-fumaca b:nth-child(2) { width: 44%; height: 40%; right: 4%; bottom: 12%; }
.capa-fumaca b:nth-child(3) { width: 38%; height: 34%; left: 31%; top: 6%; background: radial-gradient(closest-side, rgba(255, 110, 190, .42), transparent); }
.capa-fumaca b:nth-child(4) { width: 30%; height: 50%; left: 12%; top: 18%; background: radial-gradient(closest-side, rgba(170, 60, 255, .32), transparent); }
.capa-fumaca b:nth-child(5) { width: 30%; height: 50%; right: 12%; top: 22%; background: radial-gradient(closest-side, rgba(255, 90, 60, .26), transparent); }
.anima .capa-fumaca b { animation: fumaca 16s ease-in-out infinite alternate; }
.anima .capa-fumaca b:nth-child(2) { animation-duration: 19s; animation-delay: -6s; }
.anima .capa-fumaca b:nth-child(3) { animation-duration: 13s; animation-delay: -3s; }
.anima .capa-fumaca b:nth-child(4) { animation-duration: 21s; animation-delay: -9s; }
.anima .capa-fumaca b:nth-child(5) { animation-duration: 17s; animation-delay: -12s; }
@keyframes fumaca { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; } 50% { transform: translate3d(14px, -26px, 0) scale(1.12); opacity: .85; } 100% { transform: translate3d(-12px, -48px, 0) scale(.94); opacity: .6; } }
@media (max-width: 899px) {
  /* celular: você mais longe, a logo inteira em cima (o rosto não cobre o nome) e sobra espaço pra vitrine aparecer na 1ª tela */
  .capa-cena { height: 560px; min-height: 0; }
  .capa-logo { top: 14px; width: min(92vw, 420px); }
  .capa-eu { width: min(90vw, 380px); bottom: 118px; }
  .capa-fumaca { width: 120vw; height: 360px; bottom: 100px; }
  .capa-base { bottom: 16px; gap: 0; }
  .capa-frase { font-size: 1.62rem; max-width: none; }
  .capa-acoes { margin-top: 14px; }
  .capa-acoes .btn-contorno { display: none; }
  .capa-acoes .btn-grande { min-height: 52px; }
}

/* =================== 01/11: refinos (sugestões do ChatGPT que o Junior mandou) =================== */
/* logo um pouco menor e menos estourada, iluminando o fundo atrás */
.capa-logo { filter: brightness(.9) saturate(.95) drop-shadow(0 0 1.5px rgba(255, 140, 210, .85)) drop-shadow(0 10px 22px rgba(0, 0, 0, .95)) drop-shadow(0 0 40px rgba(255, 63, 164, .3)); }
.capa-brilho { position: absolute; z-index: 0; left: 50%; top: 0; width: 120%; height: 62%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(38% 46% at 34% 46%, rgba(47, 155, 255, .2), transparent 70%), radial-gradient(40% 50% at 64% 50%, rgba(255, 63, 164, .24), transparent 70%); filter: blur(10px); }
/* luz azul de um lado e magenta do outro, sutil */
.capa-eu { filter: drop-shadow(-7px 0 10px rgba(47, 155, 255, .5)) drop-shadow(7px 0 10px rgba(255, 63, 164, .55)) drop-shadow(0 0 30px rgba(255, 63, 164, .2)); }
/* lema embaixo da logo */
.capa-lema { position: absolute; z-index: 3; left: 0; right: 0; text-align: center; font: 600 .8rem/1.3 var(--sans); letter-spacing: .04em; color: color-mix(in srgb, var(--claro) 78%, transparent); text-shadow: 0 2px 12px #000; }
/* texto principal com mais espaço, condensado, branco */
.capa-frase { color: #fff; letter-spacing: .005em; }
/* segundo botão só com contorno claro, sem competir */
.capa .btn-contorno { background: transparent; border-color: rgba(255, 255, 255, .45); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 899px) {
  .capa-logo { top: 16px; width: min(84vw, 400px); }
  .capa-lema { top: 142px; }
  .capa-eu { width: min(86vw, 370px); bottom: 112px; }
  .capa-brilho { height: 300px; }
}
@media (min-width: 900px) {
  .capa-logo { width: min(62vw, 900px); top: 11%; }
  .capa-lema { top: auto; bottom: 18%; left: auto; right: max(var(--gutter), calc((100% - 1280px) / 2)); text-align: right; font-size: .9rem; display: none; }
  .capa-assina::after { content: "Não esperamos oportunidades. Criamos as nossas."; display: block; margin-top: 12px; font: 600 .95rem/1.3 var(--sans); letter-spacing: .02em; text-transform: none; color: #fff; }
  .capa-frase { font-size: clamp(2.4rem, 3.4vw, 3.3rem); max-width: 17ch; }
  .capa-eu { height: 90%; }
}

/* =================== 01/11: foto "Retrato Neon" em camadas (fundo com fumaça → logo → ele recortado) =================== */
.capa-foto { position: absolute; inset: 0; pointer-events: none; }
.capa-foto .capa-fundo, .capa-foto .capa-eu { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 51% 0; transform: none; filter: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 72%, transparent 98%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 72%, transparent 98%); }
.capa-foto .capa-fundo { z-index: 0; }
.capa-foto .capa-eu { z-index: 2; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%); mask-image: linear-gradient(180deg, #000 72%, transparent 98%); }
.capa-foto .capa-brilho { z-index: 0; }
.capa-foto .capa-fumaca { z-index: 0; width: 100%; height: 100%; left: 0; bottom: 0; transform: none; opacity: .5; }
@media (max-width: 899px) {
  /* celular: a foto começa embaixo da logo e do lema, o rosto não cobre o nome */
  .capa-foto { top: 166px; bottom: 56px; }
  .capa-foto .capa-fundo, .capa-foto .capa-eu { width: 100%; height: 100%; }
  .capa-brilho { top: -150px; height: 260px; }
}
@media (min-width: 900px) {
  .capa-foto .capa-fundo { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%); mask-image: linear-gradient(180deg, #000 72%, transparent 98%); }
}

/* =================== 01/11: lema na mesma letra dos rótulos (mono, caixa alta), com respiro embaixo da logo =================== */
.capa-lema { font: 500 .62rem/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--claro) 66%, transparent); }
.capa-assina::after { font: 500 .7rem/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--claro); }
@media (max-width: 899px) {
  .capa-lema { top: 158px; }
  .capa-foto { top: 184px; }
}

/* vitrine arrastável (o JS move o trilho; a animação de CSS fica só de reserva sem JS) */
.vit-janela.arrastavel { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.vit-janela.arrastavel:active { cursor: grabbing; }
.anima .vit-janela.arrastavel .vit-trilho { animation: none; will-change: transform; }
.vit-janela.arrastavel img { -webkit-user-drag: none; pointer-events: none; }
.calmo .vit-janela.arrastavel { overflow: hidden; }

/* =================== 01/11: menos rolagem, menu na letra dos rótulos, capa do PC com a logo inteira em cima =================== */
.topo { background: #050505; -webkit-backdrop-filter: none; backdrop-filter: none; }
.topo-nav a { font: 500 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
@media (min-width: 900px) {
  .sec { padding: 104px 0; }
  .capa-cena { height: calc(100svh - var(--topo) - 150px); }
  .capa-logo { top: 22px; width: min(44vw, 600px); }
  .capa-lema { display: block; top: 236px; bottom: auto; left: 0; right: 0; text-align: center; font-size: .66rem; }
  .capa-foto { top: 262px; bottom: -60px; left: 50%; right: auto; width: min(100%, 980px); transform: translateX(-50%); }
  .capa-foto .capa-fundo { -webkit-mask-image: radial-gradient(70% 90% at 50% 40%, #000 55%, transparent 100%); mask-image: radial-gradient(70% 90% at 50% 40%, #000 55%, transparent 100%); }
  .capa-assina { display: none; }
}
/* laboratório em abas */
.lab-abas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 40px; padding: 0 var(--gutter); }
.lab-abas::-webkit-scrollbar { display: none; }
.lab-abas button { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linha); background: transparent; border-radius: 999px; padding: 11px 16px; font: 600 .9rem/1 var(--sans); color: var(--tinta-2); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.lab-abas button b { font: 500 .66rem/1 var(--mono); color: var(--azul); }
.lab-abas button:hover { border-color: var(--tinta); color: var(--tinta); }
.lab-abas button[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--creme); }
.lab-abas button[aria-selected="true"] b { color: #FF6FB8; }
.labs > li[hidden] { display: none; }
@media (min-width: 900px) { .lab-abas { margin-bottom: 56px; flex-wrap: wrap; overflow: visible; } }
/* convite que fecha a fileira do ramo */
.p-convite { display: flex; }
.conv-caixa { display: flex; flex-direction: column; justify-content: center; gap: 12px; width: 100%; min-height: 100%; border: 1.5px dashed var(--linha); border-radius: 28px; padding: 28px 24px; background: linear-gradient(160deg, rgba(255, 63, 164, .06), rgba(47, 155, 255, .05)); }
.conv-t { font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.02 var(--display); text-transform: uppercase; }
.conv-t em { font-style: normal; background: var(--cromo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.conv-s { font-size: .92rem; line-height: 1.5; color: var(--tinta-2); max-width: 34ch; }
.conv-caixa .btn { align-self: flex-start; margin-top: 6px; }
.p-trilho .p-convite { grid-column: span 2; }
@media (min-width: 900px) { .p-trilho .p-convite { grid-column: span var(--s, 1); } }
@media (min-width: 900px) {
  .capa-foto .capa-fundo { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 96%), linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 96%), linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-composite: intersect; }
}
.p-convite .btn { display: inline-flex; }
@media (min-width: 900px) { .capa-luz { background: radial-gradient(34% 40% at 50% 20%, rgba(255, 63, 164, .07), transparent 70%); } }
/* o brilho rosa largo (drop-shadow 40px) desenhava um retângulo em volta da logo: fica só contorno fino + sombra */
.capa-logo { filter: brightness(.92) saturate(.95) drop-shadow(0 0 1.5px rgba(255, 140, 210, .85)) drop-shadow(0 10px 22px rgba(0, 0, 0, .95)); }

/* =================== 01/11: seções que se empurram + selo de demonstração nos destaques =================== */
main > section.empurra { position: relative; transform-origin: 50% 100%; will-change: transform; }
main > section.empurra::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--apaga, 0); pointer-events: none; z-index: 50; }
main > section.empurra + section.empurra { border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .55); }
main > section.empurra:not(.escura):not(.capa):not(.catalogo):not(.bloco-azul) { background: var(--creme); }
.catalogo.empurra { background: var(--creme); }
@media (min-width: 900px) { main > section.empurra + section.empurra { border-radius: 40px 40px 0 0; } }
.selo-demo { color: var(--claro-2); }
.selo-demo::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; margin-right: 8px; vertical-align: 1px; }

/* =================== 01/11 (PC): títulos e vãos menores; ponta dos carrosséis em perspectiva, sem corte seco =================== */
.t-sec { font-size: clamp(2.5rem, 7.2vw, 4.6rem); }
.t-final { font-size: clamp(2.8rem, 8vw, 5.6rem); }
@media (min-width: 900px) {
  .sec { padding: 88px 0; }
  .s-cab { margin-bottom: 48px; }
  .prev-trilho { grid-auto-columns: 232px; }
  .passos li { padding-top: 22px; padding-bottom: 24px; }
  .p-n { font-size: 2.8rem; }
}
.trilho { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--gutter) + 8px), #000 calc(100% - 90px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--gutter) + 8px), #000 calc(100% - 90px), transparent 100%); }
.trilho > li { transform-origin: 0% 50%; will-change: transform; }

/* =================== 01/11 (celular): números das seções sem corte, cabeçalhos centralizados, destaque arrastável =================== */
.cap-num, .p-n { line-height: 1 !important; padding: .04em .02em .08em; display: inline-block; }
#clientes .cli-painel { touch-action: pan-y; }
.dica-arrastar { display: none; }
@media (max-width: 899px) {
  .s-cab { text-align: center; justify-items: center; }
  .s-cab .rotulo { justify-content: center; }
  .s-sub { margin-inline: auto; }
  .cap-cab { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .cap-linha { margin-inline: auto; }
  .cap-conta { text-align: center; }
  .final .caixa { text-align: center; }
  .final-acoes { justify-content: center; }
  .dica-arrastar { display: block; text-align: center; margin: -28px 0 22px; font: 500 .66rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--claro-2); }
}

/* =================== 01/11 · Impeccable (crítica 21/32): página curta, contraste, menos degradê =================== */
/* sem etiqueta em cima do título: cabeçalho numa coluna só */
.s-cab { grid-template-columns: 1fr !important; gap: 0; }
.s-cab > div { max-width: 920px; }
@media (min-width: 900px) { .s-cab { margin-bottom: 52px; } }
/* contraste: texto preto no botão principal (o branco ficava em 2,7:1) */
.btn-cheio, .escura .btn-cheio, .bloco-azul .btn-cheio, .capa .btn-cheio { color: #0E0E0E; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .55); }
.btn-cheio:hover, .escura .btn-cheio:hover, .bloco-azul .btn-cheio:hover, .capa .btn-cheio:hover { color: #0E0E0E; }
/* letras pequenas: nada abaixo de ~11,5 px */
.selo { font-size: .72rem; }
.vit-ramo { font-size: .72rem; }
.capa-lema { font-size: .72rem; color: color-mix(in srgb, var(--claro) 82%, transparent); }
.selo.cliente, .lab-proj .selo.cliente { color: #17703F; }
.escura .selo.cliente { color: #8BE3B1; }
/* menos degradê: só a logo, o botão principal e o título final levam o cromado */
.t-sec em, .lab-ideia-t em, .escura .t-sec em, .bloco-azul .t-sec em, .conv-t em, .cap-num, .p-n, .numeros li:last-child b, .capa .numeros li:last-child b {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; }
.p-n { color: var(--claro) !important; opacity: .9; }
/* laboratório: fundo grafite, a cor do projeto só como luz na borda */
.lab-cena { background: radial-gradient(120% 90% at 20% 0%, #2A2A2E 0%, #161618 60%, #0E0E10 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor) 45%, transparent), 0 30px 70px -40px color-mix(in srgb, var(--cor) 60%, black); }
/* números da capa numa linha */
.numeros-linha { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; margin: 26px 0 0; padding: 18px 0 6px; border-top: 1px solid rgba(255, 255, 255, .14);
  font: 500 .74rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--claro) 72%, transparent); }
.numeros-linha b { font: 400 1.35rem/1 var(--display); letter-spacing: 0; color: var(--claro); margin-right: 4px; vertical-align: -2px; }
.numeros-linha i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
/* capítulo do catálogo enxuto: título e contagem numa linha */
.cap-cab { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 18px; }
.cap-cab h3 { font-size: clamp(1.9rem, 5vw, 2.8rem) !important; }
.cap-conta { border: 0 !important; padding: 0 !important; grid-column: auto !important; text-align: left !important; }
.cap-linha { flex-basis: 100%; margin-top: 2px !important; }
.cap { padding: 40px 0 56px; }
@media (max-width: 899px) { .cap-cab { justify-content: center; text-align: center; } }
/* final com quem responde */
.final-quem { margin: 22px 0 30px; max-width: 52ch; font-size: 1.06rem; line-height: 1.65; color: var(--claro-2); }
@media (max-width: 899px) { .final-quem { margin-inline: auto; } }
/* como funciona: 2x2 no celular */
@media (max-width: 639px) {
  .passos { grid-template-columns: 1fr 1fr; }
  .passos li { display: block !important; padding: 18px 12px 20px 0 !important; }
  .passos li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .18); padding-left: 14px !important; }
  .passos li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .18); }
  .passos li + li:nth-child(2) { border-top: 0; }
  .passos h3 { margin: 10px 0 6px; font-size: 1rem; }
  .passos p { font-size: .9rem; }
  .p-n { font-size: 2.2rem; }
}
/* números das barras e etiqueta "A função" no mínimo de 11,5 px; cor de reserva clara no botão (o texto agora é preto) */
.cat-barra a b, .lab-abas button b, .lab-clipe-rotulo { font-size: .72rem; }
.btn-cheio, .escura .btn-cheio, .bloco-azul .btn-cheio, .capa .btn-cheio { background-color: #FF6A5A; }

/* =================== 01/11: laboratório = cartões de função (vídeo + nome grande + "toque pra testar") =================== */
.fn-trilho { grid-auto-columns: min(78vw, 300px); gap: 16px; padding-top: 6px; }
.fn a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--claro); background: #121214; border-radius: 26px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 40px -24px rgba(0, 0, 0, .55); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.fn a:hover, .fn a:focus-visible { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 34px 50px -26px rgba(0, 0, 0, .6); }
.fn-tela { aspect-ratio: 4 / 5; border-radius: 0; }
.fn-testar { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px;
  background: linear-gradient(90deg, #FF3FA4, #FF7A1F); color: #0E0E0E; font: 700 .8rem/1 var(--sans); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6); }
.fn-testar i { width: 8px; height: 8px; border-radius: 50%; background: #0E0E0E; }
.anima .fn-testar i { animation: fn-pulso 1.6s ease-out infinite; }
@keyframes fn-pulso { 0% { box-shadow: 0 0 0 0 rgba(14, 14, 14, .55); } 100% { box-shadow: 0 0 0 9px rgba(14, 14, 14, 0); } }
.fn-corpo { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 18px; flex: 1; }
.fn-tipo { font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #FF8FC8; }
.fn-nome { font: 400 1.65rem/1 var(--display); text-transform: uppercase; color: #fff; }
.fn-linha { font-size: .94rem; line-height: 1.5; color: color-mix(in srgb, var(--claro) 78%, transparent); }
.fn-pe { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.fn-onde { font-size: .78rem; color: var(--claro-2); }
.fn-seta { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0E0E0E; }
.fn-seta svg { width: 16px; height: 16px; }
.fn-conta b { color: var(--tinta); font-weight: 600; }
@media (min-width: 900px) { .fn-trilho { grid-auto-columns: 286px; gap: 22px; } }
/* canto arredondado das seções que se empurram não pode mostrar fundo claro: o fundo da página é preto e as partes claras têm fundo próprio */
html, body { background: #050505; }
.cat-corpo, .cap, .catalogo.empurra { background: var(--creme); }
.cap.cap-areia { background: var(--areia); }

/* =================== 01/11: laterais da capa no PC largo = a fumaça da própria foto, mexendo devagar (no celular não aparece) =================== */
.capa-nevoa { display: none; }
@media (min-width: 1100px) {
  .capa-nevoa { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .capa-nevoa img { position: absolute; bottom: -4%; height: 104%; width: auto; max-width: none; mix-blend-mode: screen; opacity: .95; will-change: transform; }
  .nv-esq { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 100%), linear-gradient(180deg, transparent 0, #000 30%, #000 80%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 45%, transparent 100%), linear-gradient(180deg, transparent 0, #000 30%, #000 80%, transparent 100%); mask-composite: intersect; }
  .nv-dir { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 45%, transparent 100%), linear-gradient(180deg, transparent 0, #000 30%, #000 80%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(270deg, #000 45%, transparent 100%), linear-gradient(180deg, transparent 0, #000 30%, #000 80%, transparent 100%); mask-composite: intersect; }
  .anima .nv-esq { animation: nevoa-esq 18s ease-in-out infinite alternate; }
  .anima .nv-dir { animation: nevoa-dir 22s ease-in-out infinite alternate; }
}
@keyframes nevoa-esq { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(4%, -4%, 0) scale(1.08); } }
@keyframes nevoa-dir { from { transform: translate3d(3%, 1%, 0) scale(1.04); } to { transform: translate3d(-4%, -5%, 0) scale(1); } }

/* =================== 01/11: títulos com respiro pros acentos; "função" em destaque; aviso de arrastar/tocar claro =================== */
.t-sec { line-height: 1.04 !important; }
.t-final { line-height: 1.02; }
.cap-cab h3, .fn-nome { line-height: 1.04; }
#lab-titulo em { color: #C4126C !important; -webkit-text-fill-color: #C4126C !important; }
.fn-dica { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 13px; border-radius: 999px; background: var(--tinta); color: #fff; font: 600 .92rem/1.2 var(--sans); }
.fn-dica svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #FF8FC8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.anima .fn-dica svg { animation: fn-arrasta 1.8s ease-in-out infinite; }
@keyframes fn-arrasta { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (max-width: 899px) { .fn-bloco .trilho-cab { justify-content: center; } }

/* =================== 01/11: vinheta esfumaçada na base da capa (sem corte reto na emenda com a vitrine) =================== */
.capa-cena::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0) 0%, rgba(5, 5, 5, .55) 45%, #050505 100%); }
.capa-cena::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -40px; height: 140px; z-index: 2; pointer-events: none; filter: blur(30px); opacity: .55;
  background: radial-gradient(40% 60% at 22% 50%, rgba(47, 155, 255, .35), transparent 70%), radial-gradient(40% 60% at 78% 50%, rgba(255, 63, 164, .35), transparent 70%); }
.vitrine { margin-top: -26px; }
@media (max-width: 899px) { .capa-cena::after { height: 120px; } .capa-cena::before { height: 100px; } }
@media (max-width: 899px) { .vitrine { margin-top: 2px; } }

/* =================== 01/11: ABERTURA · o letreiro da Bandit acende e cola na capa (1x por visita) =================== */
.ab { display: none; }
.ab-on .ab { display: block; position: fixed; inset: 0; z-index: 200; background: #050505; overflow: hidden; cursor: pointer; }
.ab-on body { overflow: hidden; }
.ab-on .capa-logo, .ab-on .capa-lema { opacity: 0; }
.ab-on .capa-foto, .ab-on .capa-nevoa { opacity: 0; transform: scale(1.05); }
.capa-foto, .capa-nevoa { transition: opacity 1.1s cubic-bezier(.2, .7, .2, 1), transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.ab-revela .capa-foto, .ab-revela .capa-nevoa { opacity: 1 !important; transform: none !important; }
.ab-halo { position: absolute; left: 50%; top: 46%; width: min(120vw, 1300px); height: min(70vw, 620px); transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 63, 164, .42), rgba(120, 60, 255, .22) 45%, rgba(47, 155, 255, .12) 65%, transparent); filter: blur(30px); }
.ab-faisca { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ab-letreiro { position: absolute; left: 50%; top: 46%; width: min(86vw, 760px); transform: translate(-50%, -50%); transform-origin: 0 0; }
.ab-logo { display: block; width: 100%; height: auto; filter: brightness(.14) saturate(.3); }
.ab-brilho { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%); background-size: 250% 100%; background-position: 120% 0; mix-blend-mode: overlay;
  -webkit-mask: url(/v2/img/logo-capa.webp) center / 100% 100% no-repeat; mask: url(/v2/img/logo-capa.webp) center / 100% 100% no-repeat; }
.ab-lema { position: absolute; left: 0; right: 0; top: calc(46% + min(86vw, 760px) * .2); text-align: center; opacity: 0; transform-origin: 50% 0;
  font: 500 .72rem/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--claro) 82%, transparent); padding: 0 16px; }
.ab-pular { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; font: 500 .66rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .32); }
.ab.saindo { background: transparent; transition: background-color .9s ease; }
.ab.saindo .ab-pular, .ab.saindo .ab-faisca { opacity: 0; transition: opacity .4s; }

/* fumaça mexendo também no celular: as duas camadas laterais entram por cima da foto (atrás dele) e o movimento ficou mais visível */
@keyframes nevoa-esq { 0% { transform: translate3d(-6%, 3%, 0) scale(1); } 50% { transform: translate3d(3%, -3%, 0) scale(1.1); } 100% { transform: translate3d(7%, -7%, 0) scale(1.04); } }
@keyframes nevoa-dir { 0% { transform: translate3d(6%, 2%, 0) scale(1.08); } 50% { transform: translate3d(-3%, -4%, 0) scale(1); } 100% { transform: translate3d(-7%, -8%, 0) scale(1.1); } }
@media (max-width: 1099px) {
  .capa-nevoa { display: block; position: absolute; left: 0; right: 0; top: 150px; bottom: 40px; z-index: 1; pointer-events: none; overflow: hidden; }
  .capa-nevoa img { position: absolute; bottom: 0; height: 100%; width: auto; max-width: none; mix-blend-mode: screen; opacity: .8; will-change: transform; }
  .nv-esq { left: -38%; -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 95%), linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 40%, transparent 95%), linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%); mask-composite: intersect; }
  .nv-dir { right: -38%; -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent 95%), linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(270deg, #000 40%, transparent 95%), linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%); mask-composite: intersect; }
  .anima .nv-esq { animation: nevoa-esq 11s ease-in-out infinite alternate; }
  .anima .nv-dir { animation: nevoa-dir 13s ease-in-out infinite alternate; }
}
@media (min-width: 1100px) { .anima .nv-esq { animation-duration: 14s; } .anima .nv-dir { animation-duration: 17s; } }

/* abertura: o zoom de entrada usa "scale" (não "transform"), pra não desfazer a centralização da foto no PC */
.ab-on .capa-foto, .ab-on .capa-nevoa { transform: none; scale: 1.05; }
.ab-revela .capa-foto, .ab-revela .capa-nevoa { transform: none !important; scale: 1; }
@media (min-width: 900px) { .ab-on .capa-foto, .ab-revela .capa-foto { transform: translateX(-50%) !important; } }
.capa-foto, .capa-nevoa { transition: opacity 1.1s cubic-bezier(.2, .7, .2, 1), scale 1.6s cubic-bezier(.2, .7, .2, 1); }
/* fumaça com mais movimento */
@keyframes nevoa-esq { 0% { transform: translate3d(-12%, 5%, 0) scale(1); } 50% { transform: translate3d(4%, -6%, 0) scale(1.16); } 100% { transform: translate3d(14%, -12%, 0) scale(1.06); } }
@keyframes nevoa-dir { 0% { transform: translate3d(12%, 4%, 0) scale(1.14); } 50% { transform: translate3d(-4%, -7%, 0) scale(1); } 100% { transform: translate3d(-14%, -13%, 0) scale(1.16); } }
@media (max-width: 1099px) { .anima .nv-esq { animation-duration: 8s; } .anima .nv-dir { animation-duration: 9.5s; } .capa-nevoa img { opacity: .9; } }


/* ================= 01/11: seletor de idioma PT · EN · ES (versões /v2/en/ e /v2/es/) ================= */
.idiomas { display: flex; margin-left: auto; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 2px; }
.idiomas a { font: 500 .7rem/1 var(--mono); letter-spacing: .1em; color: rgba(242, 242, 240, .62); text-decoration: none; padding: 7px 8px; border-radius: 999px; transition: color .2s, background-color .2s; }
.idiomas a:hover { color: #fff; }
.idiomas a[aria-current] { background: #F2F2F0; color: #0E0E0E; }
.topo .idiomas + .btn { margin-left: 8px; }
@media (min-width: 1080px) { .idiomas { margin-left: 18px; } }
@media (max-width: 380px) { .idiomas a { padding: 7px 6px; } }