/* Midwall — landing.
   1. base e hero: vêm de hero-ideias/base.css e hero-ideias/ideia-3-totens-fita/cena.css (hero aprovado em 13/11);
      só a barra mudou (menu do TEXTOS.md, fundo ao rolar, botão de menu no celular).
   2. o resto da página.
   Cores da Midwall: ciano #3DBDC9, roxo #7B5BBA, fundo quase preto azulado. Títulos em Montserrat, texto em Manrope.
   Movimento só em transform e opacity; em prefers-reduced-motion tudo aparece pronto. */

:root {
  --bg: #04070b;
  --bg-2: #08111a;
  --ink: #f3f8fa;
  --muted: #9db3bb;
  --cyan: #3dbdc9;
  --cyan-l: #8fe9f1;
  --cyan-d: #0f4f57;
  --violet: #7b5bba;
  --violet-l: #b9a3ee;
  --ambar: #f2c26b;
  --fio: rgba(160, 222, 232, 0.13);
  --fio-2: rgba(160, 222, 232, 0.26);

  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Inter', 'Segoe UI', system-ui, sans-serif;

  --t-display: clamp(1.95rem, 0.95rem + 3.3vw, 4.1rem);
  --t-h2: clamp(1.85rem, 1.15rem + 2.5vw, 3.25rem);
  --t-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  --t-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  --pad: clamp(20px, 3.4vw, 48px);
  --max: 1400px;
  --bar-h: 76px;
  --sec: clamp(44px, 4.6vw, 72px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.calmo, html.captura { scroll-behavior: auto; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--cyan-l); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .bar__menu:focus-visible { border-radius: 999px; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pular {
  position: fixed; left: 16px; top: 12px; z-index: 40;
  padding: 12px 18px; border-radius: 999px;
  background: var(--cyan); color: #031418; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  transform: translateY(-80px); opacity: 0;
}
.pular:focus-visible { transform: none; opacity: 1; }

/* =====================================================================
   1. BARRA
   ===================================================================== */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--bar-h);
}
/* no topo da página: o mesmo degradê do hero aprovado */
.bar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(4, 7, 11, 0.85), rgba(4, 7, 11, 0));
}
/* ao rolar (e com o menu aberto): fundo cheio e um fio embaixo. Só a opacidade muda. */
.bar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--bg);
  border-bottom: 1px solid var(--fio);
  opacity: 0; transition: opacity 0.25s ease;
}
.rolou .bar::after, .bar.aberto::after { opacity: 1; }
.bar__in {
  position: relative; z-index: 1;
  height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.bar__logo { display: inline-flex; align-items: center; min-height: 44px; }
.bar__logo img { width: 116px; height: auto; }
.bar__acoes { display: flex; align-items: center; gap: 10px; }

.bar__menu {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1.5px solid rgba(243, 248, 250, 0.3); background: transparent;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.bar__menu path { transform-box: view-box; transform-origin: 50% 50%; transition: transform 0.22s var(--ease-out); }
.bar.aberto .bar__menu { border-color: var(--cyan); color: var(--cyan-l); }
.bar.aberto .bar__menu .l1 { transform: translateY(3.5px) rotate(45deg); }
.bar.aberto .bar__menu .l2 { transform: translateY(-3.5px) rotate(-45deg); }

/* menu: até 1079 px é uma lista que abre embaixo da barra */
.bar__nav {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; padding: 4px var(--pad) 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--fio);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s linear 0.2s;
}
.bar.aberto .bar__nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.bar__nav a {
  display: flex; align-items: center; min-height: 56px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
  border-top: 1px solid var(--fio);
}
.bar__nav a:first-child { border-top: 0; }
.bar__nav a:focus-visible { outline-offset: -3px; }

@media (min-width: 1080px) {
  .bar__menu { display: none; }
  .bar__nav {
    position: static; display: flex; gap: clamp(18px, 2.3vw, 34px); padding: 0;
    margin-left: auto;                              /* o menu encosta à direita, não no meio da barra */
    background: none; border: 0;
    visibility: visible; opacity: 1; transform: none; transition: none;
    font-size: 0.9375rem; font-weight: 600; color: var(--muted);
  }
  .bar__nav a {
    min-height: 44px; padding: 0 2px; border: 0;
    font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem;
    transition: color 0.2s;
  }
}
@media (hover: hover) and (pointer: fine) {
  .bar__nav a:hover { color: var(--ink); }
  .bar__menu:hover { border-color: var(--cyan); color: var(--cyan-l); }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  transition: transform 0.18s var(--ease-out), background 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer;
}
.btn:active { transform: scale(0.97); }
.btn--solid { background: var(--cyan); color: #031418; }
.btn--line { border-color: rgba(243, 248, 250, 0.3); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background: var(--cyan-l); }
  .btn--line:hover { border-color: var(--cyan); color: var(--cyan-l); }
}
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 0.875rem; white-space: nowrap; }
.btn--g { min-height: 60px; padding: 0 34px; font-size: 1.0625rem; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* =====================================================================
   1. HERO (igual ao aprovado)
   ===================================================================== */
.hero {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: calc(var(--bar-h) + 12px) var(--pad) 40px;
  max-width: var(--max);
  margin: 0 auto;
  isolation: isolate;
}
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 16px; padding-bottom: 56px; }
}

.grain {
  position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.copy { position: relative; z-index: 2; padding: 8px 0 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan-l);
}
.eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 0 4px rgba(61, 189, 201, 0.22), 0 0 16px var(--cyan);
}
.hero h1 {
  margin-top: 20px;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--cyan-l) 0%, var(--cyan) 45%, var(--violet-l) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { margin-top: 22px; max-width: 34em; font-size: var(--t-lead); color: var(--muted); text-wrap: pretty; }
.cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

/* celular: o palco vem primeiro, de ponta a ponta, e o texto logo abaixo; título, botões e palco cabem na primeira tela */
.stage {
  position: relative; z-index: 1;
  order: -1;
  width: auto;
  margin: 0 calc(var(--pad) * -1);
  height: 40svh;
}
@media (max-width: 999px) {
  .hero { align-content: start; padding-top: var(--bar-h); padding-bottom: 24px; }
  .lead { margin-top: 14px; font-size: 1rem; line-height: 1.5; }
  .hero h1 { margin-top: 12px; }
  .cta { margin-top: 20px; gap: 10px; flex-wrap: nowrap; }
  .cta .btn { flex: 1 1 0; padding: 0 12px; min-height: 50px; white-space: nowrap; }
}
@media (min-width: 1000px) { .stage { order: 0; margin: 0; width: 100%; height: min(78svh, 760px); } }

/* a cena inteira é um canvas do tamanho da primeira tela, atrás do texto.
   O .stage é a "janela" que a câmera enquadra; o canvas passa dos limites dele. */
.cena {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100svh;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* entrada coreografada do texto */
.js .copy .eyebrow, .js .copy h1, .js .copy .lead, .js .copy .cta, .js .bar { opacity: 0; transform: translateY(18px); }
.js.on .copy .eyebrow { animation: subir 0.8s var(--ease-out) 0.15s forwards; }
.js.on .copy h1       { animation: subir 0.9s var(--ease-out) 0.3s forwards; }
.js.on .copy .lead    { animation: subir 0.9s var(--ease-out) 0.5s forwards; }
.js.on .copy .cta     { animation: subir 0.9s var(--ease-out) 0.65s forwards; }
.js.on .bar           { animation: subir 0.9s var(--ease-out) 0s forwards; }
@keyframes subir { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .copy .eyebrow, .js .copy h1, .js .copy .lead, .js .copy .cta, .js .bar { opacity: 1; transform: none; animation: none !important; }
}
/* versão calma (prefers-reduced-motion ou ?calmo=1): o texto já nasce no lugar, sem a entrada */
.calmo .copy .eyebrow, .calmo .copy h1, .calmo .copy .lead, .calmo .copy .cta, .calmo .bar { opacity: 1; transform: none; animation: none !important; }

/* celular alto: o palco ganha um pouco mais de altura */
@media (max-width: 999px) and (min-height: 800px) {
  .stage { height: 43svh; }
}
/* celular com a tela baixa: o palco fica no mínimo de 35% e as margens do texto apertam um pouco,
   para os dois botões continuarem na primeira tela */
@media (max-width: 999px) and (max-height: 760px) {
  .stage { height: 35svh; }
  .hero h1 { margin-top: 8px; }
  .lead { margin-top: 10px; font-size: 0.9375rem; line-height: 1.45; }
  .cta { margin-top: 14px; }
}
/* tela muito baixa: a barra e o respiro do topo encolhem um pouco */
@media (max-width: 999px) and (max-height: 660px) {
  :root { --bar-h: 66px; }
  .hero { padding-top: 66px; }
}
/* celular muito estreito (320 px): os dois botões lado a lado não cabiam */
@media (max-width: 340px) {
  .hero h1 { font-size: 1.75rem; margin-top: 6px; }
  .lead { font-size: 0.875rem; margin-top: 8px; }
  .cta { gap: 8px; margin-top: 12px; }
  .cta .btn { padding: 0 8px; font-size: 0.8125rem; min-height: 44px; }
}
@media (max-width: 360px) {
  .bar__in { gap: 10px; }
  .bar__logo img { width: 88px; }
  .bar__acoes { gap: 8px; }
  .btn--sm { padding: 0 12px; font-size: 0.8125rem; }
}

/* =====================================================================
   2. O RESTO DA PÁGINA
   ===================================================================== */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.sec { position: relative; padding-block: var(--sec); overflow-x: clip; }

.cab h2, .contato h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.022em;
  text-wrap: balance;
}
.cab p { margin-top: 16px; max-width: 34em; font-size: var(--t-lead); color: var(--muted); text-wrap: pretty; }
h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.012em; text-wrap: balance; }

/* aviso de conferência: sai antes de publicar */
.confirmar {
  display: inline-block; max-width: 100%;
  padding: 7px 11px; border-radius: 6px;
  border: 1px dashed rgba(242, 194, 107, 0.62);
  background: rgba(242, 194, 107, 0.07);
  color: var(--ambar);
  font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; line-height: 1.45; letter-spacing: 0;
  text-wrap: pretty; overflow-wrap: anywhere;
}

/* link de texto: o traço embaixo cresce no hover */
.elo {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--cyan-l);
}
.elo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 9px; height: 1.5px;
  background: currentColor; opacity: 0.4;
  transition: opacity 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .elo:hover::after { opacity: 1; }
}

/* revelação ao rolar: curta, uma vez. Só existe com JS e com movimento permitido. */
@media (prefers-reduced-motion: no-preference) {
  .rv .rev {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .rv .rev.visto { opacity: 1; transform: none; }
}

/* ---------- 2. o que fazemos ---------- */
.servicos { padding-top: clamp(40px, 4.6vw, 72px); }
.servicos__grade {
  --vao: clamp(28px, 4.2vw, 64px);
  margin-top: clamp(36px, 4.6vw, 64px);
  display: grid; grid-template-columns: 1fr; gap: 44px;
}
.servico { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.servico__arte { position: relative; width: 100%; aspect-ratio: 5 / 4; }
.servico__arte canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.servico h3 { margin-top: 20px; }
.servico p { margin-top: 12px; color: var(--muted); max-width: 32em; text-wrap: pretty; }
.servico .confirmar { margin-top: 12px; color: var(--ambar); }
.servico .elo { margin-top: 10px; }
@media (max-width: 899px) {
  .servico__arte { aspect-ratio: 4 / 3; max-width: 520px; }
  .servico + .servico { padding-top: 12px; border-top: 1px solid var(--fio); }
}
@media (min-width: 900px) {
  .servicos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vao); }
  .servico + .servico::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--vao) / -2); width: 1px;
    background: linear-gradient(to bottom, transparent, var(--fio) 18%, var(--fio) 82%, transparent);
  }
  .servico .elo { margin-top: auto; padding-top: 10px; }
}
.servicos__fim {
  margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--fio);
  max-width: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.012em;
  text-wrap: balance;
}

/* ---------- 3. painel 3D ---------- */
@media (min-width: 900px) {
  .cab--lado { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: end; }
  .cab--lado p { margin-top: 0; justify-self: start; }
}
.quina { margin-top: clamp(32px, 4.4vw, 60px); }
.quina__cena {
  position: relative;
  height: clamp(460px, 70svh, 780px);
  overflow: hidden; contain: strict;
  background: var(--bg);
  border-radius: 20px;
}
.quina__cena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* véu parado por cima do canvas (não custa por quadro): a rua some no escuro da página pelos quatro lados */
.quina__cena::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(4, 7, 11, 1) 0%, rgba(4, 7, 11, 0) 16%, rgba(4, 7, 11, 0) 84%, rgba(4, 7, 11, 1) 100%),
    linear-gradient(180deg, rgba(4, 7, 11, 1) 0%, rgba(4, 7, 11, 0) 12%, rgba(4, 7, 11, 0) 86%, rgba(4, 7, 11, 1) 100%);
}
@media (max-width: 699px) {
  /* celular: de ponta a ponta, com a altura que a cena pede para aparecer inteira */
  .quina { margin-inline: calc(var(--pad) * -1); }
  .quina__cena { height: auto; aspect-ratio: 10 / 11; border-radius: 0; }
  .quina__cena::after {
    background: linear-gradient(180deg, rgba(4, 7, 11, 1) 0%, rgba(4, 7, 11, 0) 9%, rgba(4, 7, 11, 0) 88%, rgba(4, 7, 11, 1) 100%);
  }
}
.p3d__baixo { margin-top: clamp(28px, 4vw, 56px); display: grid; gap: 40px; }
.p3d__como p { margin-top: 14px; max-width: 31em; font-size: var(--t-lead); color: var(--muted); text-wrap: pretty; }
.dados li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--fio);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.012em;
}
.dados li:last-child { border-bottom: 1px solid var(--fio); }
/* marcador: um ponto de LED aceso */
.dados li::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 2px; transform: translateY(-2px);
  background: var(--cyan-l); box-shadow: 0 0 0 3px rgba(61, 189, 201, 0.18), 0 0 14px rgba(61, 189, 201, 0.9);
}
.dados li:nth-child(2)::before { background: #a9c4f2; box-shadow: 0 0 0 3px rgba(98, 140, 215, 0.2), 0 0 14px rgba(98, 140, 215, 0.9); }
.dados li:nth-child(3)::before { background: var(--violet-l); box-shadow: 0 0 0 3px rgba(123, 91, 186, 0.24), 0 0 14px rgba(123, 91, 186, 0.95); }
.p3d__dados .btn { margin-top: 28px; }
@media (min-width: 900px) {
  .p3d__baixo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
}
@media (max-width: 480px) { .p3d__dados .btn { width: 100%; } }

/* ---------- 4. painéis ---------- */
/* painéis e eventos abrem com um fio e um degrau leve de tom: dá ritmo à página sem virar caixa */
.paineis, .eventos { border-top: 1px solid var(--fio); background: linear-gradient(180deg, #070c13 0%, var(--bg) min(520px, 60%)); }
.paineis__topo { display: grid; gap: 20px; justify-items: start; }
@media (min-width: 900px) {
  .paineis__topo { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
  .paineis__topo .confirmar { max-width: 26em; }
}
.telas {
  margin-top: clamp(32px, 4.4vw, 60px);
  display: grid; grid-template-columns: 1fr; gap: 26px;
}
.tela { display: flex; flex-direction: column; min-width: 0; }
/* a tela: gabinete escuro, um fio que pega a luz e a luz do LED vazando por baixo */
.tela__led {
  position: relative; aspect-ratio: 5 / 2;
  border-radius: 5px; background: #050a10;
  box-shadow: 0 0 0 1px #02050a, 0 0 0 5px #0b131b, 0 0 0 6px rgba(160, 222, 232, 0.16), 0 26px 50px -28px rgba(61, 189, 201, 0.5);
  margin: 6px;
}
.tela--3d .tela__led {
  aspect-ratio: 16 / 10;
  box-shadow: 0 0 0 1px #02050a, 0 0 0 5px #0b131b, 0 0 0 6px rgba(160, 222, 232, 0.3), 0 30px 70px -26px rgba(61, 189, 201, 0.75), 0 30px 90px -20px rgba(123, 91, 186, 0.6);
}
.tela__led canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 4px; }
.tela__leg { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 6px 0; }
.tela__leg h3 { font-size: 1.0625rem; letter-spacing: -0.005em; }
.tela--3d .tela__leg h3 { font-size: var(--t-h3); }
.fmt {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 28px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--fio-2); color: var(--muted);
  font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em;
}
.fmt--3d { border-color: transparent; background: var(--cyan); color: #031418; box-shadow: 0 0 22px rgba(61, 189, 201, 0.55); }
.paineis__acao { margin-top: clamp(32px, 4vw, 52px); }
@media (min-width: 720px) {
  .telas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .tela--3d { grid-column: 1 / -1; }
  .tela--3d .tela__led { aspect-ratio: 5 / 2; }
}
@media (min-width: 1000px) {
  .telas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; }
  .tela--3d { grid-column: span 2; grid-row: span 2; }
  .tela--3d .tela__led { aspect-ratio: auto; flex: 1 1 auto; min-height: 260px; }
  .tela__led { aspect-ratio: 2 / 1; }
}
@media (max-width: 480px) { .paineis__acao .btn { width: 100%; } }

/* ---------- 5. como anunciar ---------- */
.trilho { position: relative; margin-top: clamp(36px, 4.6vw, 64px); --no: 54px; --no-h: 66px; }
/* o fio do trilho passa pelo meio dos números; a luz cresce por cima dele conforme a rolagem (só transform) */
.trilho__fio { position: absolute; left: calc(var(--no) / 2 - 1px); top: calc(var(--no-h) / 2); bottom: calc(var(--fim, 0px) + var(--no-h) / 2); width: 2px; background: var(--fio); border-radius: 2px; overflow: hidden; }
.trilho__luz {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--cyan-l), var(--cyan) 55%, var(--violet-l));
  transform-origin: 50% 0; transform: scaleY(0);
}
.passo { position: relative; padding: 0 0 48px calc(var(--no) + 26px); min-height: var(--no-h); }
.passo:last-child { padding-bottom: 0; }
/* o número de cada passo é um mostrador de pontos de LED (o site.js pinta): apagado até a rolagem chegar nele */
.passo__n {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: var(--no); height: var(--no-h); border-radius: 5px;
  display: grid; place-items: center;
  background: #050a10; color: var(--muted);
  box-shadow: 0 0 0 1px #02050a, 0 0 0 4px #0b131b, 0 0 0 5px rgba(160, 222, 232, 0.18);
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums;
}
.passo__n canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 4px; }
.passo__n .aceso { opacity: 0; transition: opacity 0.35s ease; }
.passo__n::after {
  content: ''; position: absolute; inset: -5px; border-radius: 9px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(143, 233, 241, 0.55), 0 0 30px rgba(61, 189, 201, 0.5);
  opacity: 0; transition: opacity 0.35s ease;
}
.passo:nth-child(3) .passo__n::after { box-shadow: 0 0 0 1px rgba(160, 180, 240, 0.55), 0 0 30px rgba(98, 130, 215, 0.5); }
.passo:nth-child(4) .passo__n::after { box-shadow: 0 0 0 1px rgba(185, 163, 238, 0.6), 0 0 30px rgba(123, 91, 186, 0.6); }
.passo.aceso .passo__n { color: var(--ink); }
.passo.aceso .passo__n .aceso, .passo.aceso .passo__n::after { opacity: 1; }
.passo h3 { padding-top: 4px; }
.passo p { margin-top: 10px; color: var(--muted); max-width: 30em; text-wrap: pretty; }
.passos__aviso { margin-top: clamp(32px, 4vw, 52px); }
@media (min-width: 900px) {
  .trilho { --vao: clamp(24px, 3vw, 44px); }
  .trilho__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vao); }
  .trilho__fio {
    left: calc(var(--no) / 2); top: calc(var(--no-h) / 2 - 1px); bottom: auto;
    right: calc((100% - 3 * var(--vao)) / 4 - var(--no) / 2);
    width: auto; height: 2px;
  }
  .trilho__luz { background: linear-gradient(90deg, var(--cyan-l), var(--cyan) 55%, var(--violet-l)); transform-origin: 0 50%; transform: scaleX(0); }
  .passo { padding: calc(var(--no-h) + 30px) 0 0; }
  .passo h3 { padding-top: 0; }
}

/* ---------- 6. eventos ---------- */
.eventos__topo { display: grid; gap: 28px; }
@media (min-width: 1000px) {
  .eventos__topo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
}
/* o telão: 15 módulos num plano em perspectiva. Cada módulo chega do seu canto e encaixa (transform e opacity). */
.telao { position: relative; perspective: 1500px; perspective-origin: 30% 46%; padding: 4% 7% 15% 6%; }
.telao::after {
  /* a luz do telão no chão */
  content: ''; position: absolute; left: 0; right: 2%; bottom: 0; height: 24%; pointer-events: none;
  background:
    radial-gradient(46% 62% at 30% 22%, rgba(61, 189, 201, 0.42), transparent 72%),
    radial-gradient(44% 62% at 68% 22%, rgba(123, 91, 186, 0.46), transparent 72%),
    radial-gradient(60% 70% at 50% 14%, rgba(70, 110, 130, 0.3), transparent 74%);
}
.telao__parede {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(5, 1fr);
  transform: rotateY(13deg) rotateX(2deg);
  transform-style: preserve-3d;
  box-shadow: 0 0 0 5px #0a1119, 0 0 0 6px rgba(160, 222, 232, 0.22), 0 0 90px -10px rgba(61, 189, 201, 0.28), 40px 0 110px -20px rgba(123, 91, 186, 0.3);
  background: #05090e;
}
/* a espessura do gabinete, do lado que fica mais perto, e a base onde o telão apoia */
.telao__parede::before {
  content: ''; position: absolute; top: -5px; bottom: -5px; left: -17px; width: 12px;
  background: linear-gradient(90deg, #1b2733, #0e1720);
  box-shadow: inset 1px 0 0 rgba(143, 233, 241, 0.34);
}
.telao__parede::after {
  content: ''; position: absolute; left: -22px; right: -10px; top: calc(100% + 6px); height: 13px;
  background: linear-gradient(180deg, #131d28, #070c12);
  box-shadow: inset 0 1px 0 rgba(160, 222, 232, 0.2);
}
.mod { position: relative; aspect-ratio: 1; }
.mod canvas { display: block; width: 100%; height: 100%; }
.mod::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(1, 3, 6, 0.6); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .rv .mod {
    transition: transform 0.52s var(--ease-out), opacity 0.36s ease-out;
    transition-delay: calc(var(--o, 0) * 20ms);
  }
  .rv .telao:not(.junto) .mod {
    opacity: 0;
    transform: translate3d(var(--dx, 0), var(--dy, 0), var(--dz, 0)) rotate(var(--r, 0deg));
  }
}
/* os seis itens viram ladrilhos de LED: moldura fina, malha de pontos no fundo, ícone de linha aceso */
.itens {
  margin-top: clamp(28px, 3.4vw, 48px);
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
.item {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center;
  padding: 20px 22px; border-radius: 16px;
  border: 1px solid var(--fio);
  background: linear-gradient(160deg, rgba(14, 26, 38, 0.9) 0%, rgba(6, 11, 17, 0.95) 70%);
  transition: border-color 0.25s, transform 0.25s var(--ease-out);
}
.item::before {                                     /* malha de pontos, só no canto do ícone */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(143, 233, 241, 0.16) 0.9px, transparent 1.3px) 0 0 / 7px 7px;
  -webkit-mask: radial-gradient(120% 140% at 0% 0%, #000 0%, transparent 55%); mask: radial-gradient(120% 140% at 0% 0%, #000 0%, transparent 55%);
}
.item::after {                                      /* luz ciano vinda do ícone */
  content: ''; position: absolute; left: -40px; top: -40px; width: 180px; height: 180px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(61, 189, 201, 0.16), transparent);
}
.item:nth-child(even)::after { background: radial-gradient(closest-side, rgba(123, 91, 186, 0.2), transparent); }
.item__ico {
  grid-row: span 2;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px;
  border: 1px solid var(--fio-2);
  background: radial-gradient(circle at 50% 50%, rgba(143, 233, 241, 0.12) 0.8px, transparent 1.2px) 0 0 / 5px 5px, #07101a;
  color: var(--cyan-l);
  box-shadow: inset 0 0 18px rgba(61, 189, 201, 0.12);
}
.item:nth-child(even) .item__ico { color: var(--violet-l); box-shadow: inset 0 0 18px rgba(123, 91, 186, 0.16); }
.item__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.item__ico--txt { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; }
.item h3 { font-size: 1.0625rem; align-self: end; }
.item p { margin-top: 4px; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; text-wrap: pretty; align-self: start; }
.item h3:last-child { grid-row: span 2; align-self: center; }
@media (hover: hover) and (pointer: fine) {
  .item:hover { border-color: var(--fio-2); transform: translateY(-2px); }
}
@media (min-width: 720px) { .itens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) {
  .itens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .item { min-height: 112px; padding: 22px 24px; }
}

/* ---------- 8. rodapé ---------- */
.rodape { border-top: 1px solid var(--fio); padding-block: clamp(48px, 5.4vw, 80px) 28px; background: linear-gradient(180deg, #050a10 0%, #03060a 60%); }
.rodape__in { display: grid; gap: 40px; }
.rodape__marca { display: grid; justify-items: start; align-content: start; gap: 18px; }
.rodape__logo { display: inline-flex; align-items: center; min-height: 44px; }
.rodape__logo img { width: 150px; }
.rodape__frase { max-width: 24em; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.rodape__elos { display: block; width: 132px; height: auto; margin-top: 6px; opacity: 0.85; }
.rodape__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.rodape__cols nav { display: grid; align-content: start; }
.rodape__h { margin-bottom: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.rodape__cols a { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--muted); font-size: 0.9375rem; transition: color 0.2s; }
.rodape__fmt { padding: 1px 7px; border-radius: 999px; background: rgba(61, 189, 201, 0.16); color: var(--cyan-l); font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.04em; }
@media (hover: hover) and (pointer: fine) { .rodape__cols a:hover { color: var(--ink); } }
.rodape__base {
  margin-top: clamp(36px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--fio);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  color: #6f8790; font-size: 0.8125rem;
}
@media (min-width: 900px) {
  .rodape__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; }
  .rodape__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}