/* Site do Norte. Desenho "Noite elétrica" (o mesmo do navegador): grafite
 * neutro, azul elétrico, Geist na interface, Bricolage nos títulos e Geist
 * Mono nos rótulos. A página é organizada pelos quatro pontos da bússola. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(assets/fontes/geist-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(assets/fontes/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(assets/fontes/geist-mono-latin-wght-normal.woff2) format('woff2-variations');
}

@font-face {
  font-family: 'Bricolage';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(assets/fontes/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(assets/fontes/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fundo: #09090b;
  --fundo-2: #0e0e11;
  --elevado: #131316;
  --elevado-2: #18181b;
  --texto: #f4f4f5;
  --texto-2: #a1a1aa;
  --texto-3: #71717a;
  --linha: rgba(255, 255, 255, .07);
  --linha-forte: rgba(255, 255, 255, .12);
  --hover: rgba(255, 255, 255, .045);
  --acento: #4f8cff;
  --acento-forte: #2b6cf5;
  --acento-claro: #8cb6ff;
  --brilho: rgba(79, 140, 255, .14);
  --fonte: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-titulo: 'Bricolage', 'Geist', system-ui, sans-serif;
  --fonte-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
  --raio: 14px;
  --largura: 1160px;
  --curva: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--fundo);
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg {
  display: block;
}

a {
  color: inherit;
}

p {
  margin: 0;
}

h1, h2, h3 {
  margin: 0;
  text-wrap: balance;
}

.teclas {
  white-space: nowrap;
}

kbd {
  background: var(--elevado-2);
  border: 1px solid var(--linha-forte);
  border-bottom-width: 2px;
  border-radius: 6px;
  color: var(--texto);
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: .78em;
  line-height: 1;
  min-width: 1.9em;
  padding: .32em .45em .26em;
  text-align: center;
  white-space: nowrap;
}

code {
  background: var(--elevado-2);
  border: 1px solid var(--linha);
  border-radius: 6px;
  font-family: var(--fonte-mono);
  font-size: .86em;
  padding: .12em .4em;
}

.i {
  fill: none;
  flex: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 18px;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

.pular {
  background: var(--acento-forte);
  border-radius: 8px;
  color: #fff;
  left: 16px;
  padding: 8px 14px;
  position: fixed;
  text-decoration: none;
  top: -60px;
  z-index: 100;
}

.pular:focus {
  top: 12px;
}

/* ───────────── Botões ───────────── */

.botao {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 15px;
  font-weight: 550;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, transform .2s var(--curva), box-shadow .2s;
  white-space: nowrap;
}

.botao:active {
  transform: scale(.98);
}

.botao.primario {
  background: var(--acento-forte);
  box-shadow: 0 0 0 1px rgba(140, 182, 255, .25) inset, 0 10px 30px -10px rgba(43, 108, 245, .8);
  color: #fff;
}

.botao.primario:hover {
  background: #3a78ff;
  box-shadow: 0 0 0 1px rgba(140, 182, 255, .35) inset, 0 14px 40px -10px rgba(43, 108, 245, .95);
}

.botao.fantasma {
  background: rgba(255, 255, 255, .03);
  border-color: var(--linha-forte);
  color: var(--texto);
}

.botao.fantasma:hover {
  background: rgba(255, 255, 255, .07);
}

.botao.pequeno {
  font-size: 14px;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
}

.botao.pequeno .i {
  height: 16px;
  width: 16px;
}

.icone-botao {
  align-items: center;
  border-radius: 999px;
  color: var(--texto-2);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  transition: background-color .15s, color .15s;
  width: 36px;
}

.icone-botao:hover {
  background: var(--hover);
  color: var(--texto);
}

.chip {
  align-items: center;
  background: var(--elevado);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  color: var(--texto-2);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 14px;
  gap: 8px;
  height: 38px;
  padding: 0 8px 0 14px;
  transition: background-color .15s, border-color .15s, color .15s;
}

.chip:hover {
  color: var(--texto);
}

.chip[aria-pressed=true] {
  background: rgba(79, 140, 255, .12);
  border-color: rgba(79, 140, 255, .45);
  color: var(--texto);
}

.chip kbd {
  font-size: 11px;
}

/* ───────────── Topo ───────────── */

.topo {
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  background: rgba(9, 9, 11, .72);
  border-bottom: 1px solid transparent;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: border-color .3s;
  z-index: 50;
}

.topo.rolou {
  border-bottom-color: var(--linha);
}

.topo-dentro {
  align-items: center;
  display: flex;
  gap: 24px;
  height: 64px;
  margin: 0 auto;
  max-width: var(--largura);
  padding: 0 24px;
}

.marca {
  align-items: center;
  display: flex;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 650;
  gap: 10px;
  letter-spacing: -.02em;
  text-decoration: none;
}

.marca-logo {
  height: 26px;
  width: 26px;
}

.rotas {
  display: flex;
  gap: 4px;
  margin: 0 auto;
}

.rotas a {
  align-items: center;
  border-radius: 999px;
  color: var(--texto-2);
  display: flex;
  font-size: 14px;
  gap: 8px;
  padding: 7px 13px;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}

.rotas a b {
  color: var(--texto-3);
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 500;
  transition: color .15s;
}

.rotas a:hover,
.rotas a.ativa {
  background: var(--hover);
  color: var(--texto);
}

.rotas a.ativa b {
  color: var(--acento-claro);
}

.topo-acoes {
  align-items: center;
  display: flex;
  gap: 6px;
}

/* ───────────── Começo ───────────── */

.abertura {
  align-items: center;
  display: grid;
  gap: 48px 32px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  margin: 0 auto;
  max-width: var(--largura);
  min-height: min(920px, 100svh);
  padding: 120px 24px 56px;
  position: relative;
}

/* Grade de pontos e uma luz azul atrás da bússola, como numa carta náutica à noite. */
.abertura::before {
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px);
  background-size: 24px 24px;
  content: '';
  inset: 0 -40vw;
  -webkit-mask-image: radial-gradient(50% 60% at 72% 46%, #000, transparent 75%);
  mask-image: radial-gradient(50% 60% at 72% 46%, #000, transparent 75%);
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.abertura::after {
  background: radial-gradient(34% 40% at 74% 44%, var(--brilho), transparent 72%);
  content: '';
  inset: 0 -40vw;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.selo-versao {
  align-items: center;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  color: var(--texto-2);
  display: inline-flex;
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  gap: 10px;
  margin-bottom: 28px;
  padding: 7px 14px 7px 12px;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}

.selo-versao:hover {
  border-color: rgba(79, 140, 255, .5);
  color: var(--texto);
}

.selo-versao .i {
  height: 14px;
  width: 14px;
}

.ponto-vivo {
  background: #34d399;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .16), 0 0 12px rgba(52, 211, 153, .7);
  height: 7px;
  width: 7px;
}

h1 {
  font-family: var(--fonte-titulo);
  font-size: clamp(52px, 7.6vw, 104px);
  font-variation-settings: "opsz" 96;
  font-weight: 620;
  letter-spacing: -.045em;
  line-height: .96;
}

.lead {
  color: var(--texto-2);
  font-size: clamp(16.5px, 1.35vw, 19px);
  line-height: 1.6;
  margin-top: 24px;
  max-width: 560px;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.meta {
  color: var(--texto-3);
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  margin-top: 22px;
}

/* A bússola grande: a agulha aponta pro ponteiro (main.js). */
.bussola-grande {
  aspect-ratio: 1;
  justify-self: center;
  max-width: 500px;
  position: relative;
  width: 100%;
}

.bg-mostrador {
  animation: girar 300s linear infinite;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.bg-agulha {
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(43, 108, 245, .35));
  height: 58%;
  left: 21%;
  position: absolute;
  top: 21%;
  transform: rotate(var(--angulo, 18deg));
  width: 58%;
  will-change: transform;
}

.bg-letra {
  color: var(--texto-3);
  font-family: var(--fonte-mono);
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: .1em;
  position: absolute;
  transform: translate(-50%, -50%);
}

.bg-letra.n { color: var(--acento-claro); left: 50%; top: 13.5%; }
.bg-letra.l { left: 86.5%; top: 50%; }
.bg-letra.s { left: 50%; top: 86.5%; }
.bg-letra.o { left: 13.5%; top: 50%; }

.bg-rumo {
  bottom: -34px;
  color: var(--texto-3);
  font-family: var(--fonte-mono);
  font-size: 12px;
  left: 0;
  letter-spacing: .14em;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
}

.bg-graus {
  color: var(--texto-2);
  display: inline-block;
  min-width: 4.2ch;
  text-align: right;
}

.fatos-rapidos {
  border-top: 1px solid var(--linha);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  grid-column: 1 / -1;
  justify-content: center;
  list-style: none;
  margin: 24px 0 0;
  padding: 26px 0 0;
}

.fatos-rapidos li {
  align-items: center;
  color: var(--texto-2);
  display: flex;
  font-size: 14px;
  gap: 9px;
}

.fatos-rapidos .i {
  color: var(--acento-claro);
  height: 16px;
  width: 16px;
}

/* ───────────── Seções ───────────── */

.secao {
  margin: 0 auto;
  max-width: var(--largura);
  padding: 120px 24px 40px;
  position: relative;
}

/* Régua entre as seções: riscos como os do mostrador. */
.secao::before {
  background:
    repeating-linear-gradient(90deg, var(--linha-forte) 0 1px, transparent 1px 12px) bottom / 100% 6px no-repeat,
    linear-gradient(var(--linha), var(--linha)) bottom / 100% 1px no-repeat;
  content: '';
  height: 6px;
  left: 24px;
  position: absolute;
  right: 24px;
  top: 40px;
}

.secao-cabeca {
  align-items: end;
  display: grid;
  gap: 32px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-bottom: 56px;
}

/* A letra do ponto cardeal, grande e só no contorno. */
.cardeal {
  -webkit-text-stroke: 1px rgba(140, 182, 255, .45);
  color: transparent;
  font-family: var(--fonte-titulo);
  font-size: clamp(120px, 15vw, 196px);
  font-variation-settings: "opsz" 96;
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .78;
  text-shadow: 0 0 60px rgba(79, 140, 255, .18);
  user-select: none;
}

.rotulo {
  align-items: center;
  color: var(--acento-claro);
  display: flex;
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  gap: 12px;
  letter-spacing: .2em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.rotulo span {
  border: 1px solid rgba(79, 140, 255, .35);
  border-radius: 999px;
  color: var(--texto-2);
  letter-spacing: .08em;
  padding: 3px 9px;
}

h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(38px, 5vw, 64px);
  font-variation-settings: "opsz" 96;
  font-weight: 620;
  letter-spacing: -.04em;
  line-height: 1;
}

.secao-cabeca .lead {
  max-width: 640px;
}

h3 {
  font-family: var(--fonte-titulo);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}

/* ───────────── Demonstração (uma janela do Norte de mentira) ───────────── */

.demo {
  margin: 0 auto 88px;
  max-width: 1040px;
}

.janela {
  --cor: #4f8cff;
  --site: #f59e0b;
  aspect-ratio: 16 / 9.2;
  background: color-mix(in oklab, var(--cor) 9%, #0c0c0f);
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9),
              0 0 0 1px rgba(0, 0, 0, .4),
              0 0 90px -20px color-mix(in oklab, var(--cor) 40%, transparent);
  display: flex;
  font-size: 13px;
  outline: none;
  overflow: hidden;
  position: relative;
  transition: background-color .5s var(--curva), box-shadow .5s var(--curva);
  user-select: none;
}

.janela:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 4px;
}

.j-lateral {
  display: flex;
  flex: none;
  flex-direction: column;
  padding: 10px 8px 8px;
  transition: transform .25s var(--curva), box-shadow .25s, background-color .25s;
  width: 21%;
  z-index: 2;
}

.j-topo {
  align-items: center;
  color: var(--texto);
  display: flex;
  font-family: var(--fonte-titulo);
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  height: 30px;
  padding: 0 6px;
}

.j-topo .i {
  color: var(--texto-3);
  height: 14px;
  margin-left: auto;
  width: 14px;
}

.j-logo {
  height: 15px;
  opacity: .8;
  width: 15px;
}

.j-conteudo {
  flex: 1;
  margin-top: 8px;
  min-height: 0;
  position: relative;
}

.j-conteudo.saindo {
  animation: sair-esq .18s ease-in both;
}

.j-conteudo.saindo.pra-direita {
  animation-name: sair-dir;
}

.j-conteudo.entrando {
  animation: entrar-dir .28s var(--curva) both;
}

.j-conteudo.entrando.pela-esquerda {
  animation-name: entrar-esq;
}

.j-fixos {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 9px;
}

.j-fixo {
  align-items: center;
  aspect-ratio: 54 / 41;
  background: rgba(255, 255, 255, .055);
  border-radius: 8px;
  display: flex;
  justify-content: center;
}

.j-fixo i {
  background: var(--c);
  border-radius: 4px;
  height: 13px;
  opacity: .9;
  width: 13px;
}

.j-abas {
  border-top: 1px solid var(--linha);
  list-style: none;
  margin: 0;
  padding: 7px 0 0;
}

.j-aba {
  align-items: center;
  border-radius: 7px;
  color: var(--texto-2);
  cursor: pointer;
  display: flex;
  gap: 8px;
  height: 29px;
  overflow: hidden;
  padding: 0 7px;
  position: relative;
  white-space: nowrap;
}

.j-aba:hover {
  background: rgba(255, 255, 255, .04);
}

.j-aba.ativa {
  background: rgba(255, 255, 255, .085);
  color: var(--texto);
}

/* A barrinha do container, na borda esquerda da aba. */
.j-aba.container::before {
  background: var(--cor);
  border-radius: 2px;
  content: '';
  height: 50%;
  left: 2px;
  position: absolute;
  top: 25%;
  width: 3px;
}

.j-aba i {
  background: var(--c);
  border-radius: 4px;
  flex: none;
  height: 13px;
  width: 13px;
}

.j-aba span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.j-nova {
  align-items: center;
  color: var(--texto-3);
  display: flex;
  gap: 8px;
  height: 29px;
  padding: 0 7px;
}

.j-nova .i {
  height: 13px;
  width: 13px;
}

.j-pe {
  align-items: center;
  color: var(--texto-3);
  display: flex;
  height: 30px;
  justify-content: space-between;
  padding: 0 6px;
}

.j-pe .i {
  height: 14px;
  width: 14px;
}

.j-bolinhas {
  display: flex;
  gap: 7px;
}

.j-bolinha {
  background: color-mix(in oklab, var(--c) 45%, transparent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 8px;
  padding: 0;
  transition: transform .2s var(--curva), background-color .2s;
  width: 8px;
}

.j-bolinha:hover {
  transform: scale(1.35);
}

.j-bolinha[aria-selected=true] {
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 25%, transparent);
}

.j-cartao {
  background: #101012;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 8px 24px -10px rgba(0, 0, 0, .6);
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 6px 6px 6px 0;
  min-width: 0;
  overflow: hidden;
  transition: margin .25s var(--curva);
}

.j-barra {
  align-items: center;
  background: color-mix(in oklab, var(--site) 26%, #18181b);
  color: rgba(255, 255, 255, .55);
  display: flex;
  flex: none;
  gap: 12px;
  height: 38px;
  padding: 0 12px;
  transition: background-color .45s var(--curva);
}

.j-barra .i {
  height: 14px;
  width: 14px;
}

.j-endereco {
  color: rgba(255, 255, 255, .55);
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.j-endereco b {
  color: rgba(255, 255, 255, .92);
  font-weight: 500;
}

.j-pagina {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.j-site-topo {
  background: linear-gradient(color-mix(in oklab, var(--site) 26%, #18181b), color-mix(in oklab, var(--site) 12%, #121214));
  flex: none;
  height: 26%;
  transition: background .45s var(--curva);
}

.j-site-corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 11px;
  padding: 6% 8%;
}

.j-site-corpo i {
  background: rgba(255, 255, 255, .07);
  border-radius: 5px;
  display: block;
  height: 10px;
}

.j-site-corpo .l1 { width: 72%; }
.j-site-corpo .l2 { width: 90%; }
.j-site-corpo .l3 { width: 54%; }

.j-site-grade {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin: 6px 0;
}

.j-site-grade i {
  background: color-mix(in oklab, var(--site) 14%, rgba(255, 255, 255, .05));
  border-radius: 8px;
  height: auto;
  aspect-ratio: 4 / 3;
  transition: background-color .45s;
}

/* Lateral escondida: some pra fora; a borda da janela a traz de volta por
   cima da página, como no Norte. */
.j-borda {
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 14px;
  z-index: 3;
}

.janela:not(.escondida) .j-borda {
  display: none;
}

.janela.escondida .j-lateral {
  background: color-mix(in oklab, var(--cor) 10%, rgba(14, 14, 17, .94));
  border-radius: 0 10px 10px 0;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateX(-104%);
}

.janela.escondida.revelada .j-lateral {
  box-shadow: 12px 0 40px -6px rgba(0, 0, 0, .7);
  transform: none;
}

.janela.escondida .j-cartao {
  margin-left: 6px;
}

.demo-controles {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  justify-content: center;
  margin-top: 26px;
}

.demo-dica {
  color: var(--texto-3);
  font-size: 14px;
  text-align: center;
}

/* ───────────── Recursos ───────────── */

.grade-recursos {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.recurso {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 60%), var(--elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 24px 22px 26px;
  position: relative;
  transition: border-color .25s, transform .25s var(--curva);
}

.recurso:hover {
  border-color: var(--linha-forte);
  transform: translateY(-2px);
}

.recurso > .i {
  color: var(--acento-claro);
  height: 22px;
  margin-bottom: 18px;
  width: 22px;
}

.recurso h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.recurso p {
  color: var(--texto-2);
  font-size: 14.5px;
  line-height: 1.62;
}

.recurso.largo {
  grid-column: span 2;
}

/* ───────────── Fotos ───────────── */

.fotos {
  margin-top: 96px;
}

.fotos-cabeca {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.fotos-abas {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--elevado);
  border: 1px solid var(--linha);
  border-radius: 999px;
  display: flex;
  gap: 2px;
  padding: 4px;
}

.fotos-abas button {
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--texto-2);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  padding: 7px 15px;
  transition: background-color .15s, color .15s;
}

.fotos-abas button:hover {
  color: var(--texto);
}

.fotos-abas button[aria-selected=true] {
  background: var(--elevado-2);
  box-shadow: 0 0 0 1px var(--linha-forte) inset;
  color: var(--texto);
}

.fotos-moldura {
  background: var(--elevado);
  border: 1px solid var(--linha-forte);
  border-radius: 16px;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .9);
  overflow: hidden;
  padding: 8px;
}

.fotos-moldura figure {
  margin: 0;
}

.fotos-moldura img {
  border-radius: 10px;
  height: auto;
  width: 100%;
}

/* ───────────── Teclado ───────────── */

.teclado {
  background: var(--elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  margin-top: 56px;
  padding: 28px 28px 22px;
}

.teclado h3 {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.teclado h3 .i {
  color: var(--acento-claro);
}

.atalhos {
  display: grid;
  gap: 0 40px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.atalhos div {
  align-items: center;
  border-top: 1px solid var(--linha);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 0;
}

.atalhos dt {
  flex: none;
  order: 2;
}

.atalhos dd {
  color: var(--texto-2);
  font-size: 14.5px;
  margin: 0;
}

/* ───────────── Leve ───────────── */

.medidas {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.medida {
  background: var(--elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px 24px 24px;
}

.medida-rotulo {
  align-items: center;
  color: var(--texto-2);
  display: flex;
  font-size: 14px;
  gap: 9px;
}

.medida-rotulo .i {
  color: var(--acento-claro);
  height: 16px;
  width: 16px;
}

.medida-valor {
  color: var(--texto-2);
  font-family: var(--fonte-mono);
  font-size: 18px;
  margin: 18px 0 22px;
}

.medida-valor span {
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-size: 64px;
  font-variation-settings: "opsz" 96;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
}

.barras {
  display: grid;
  gap: 9px;
}

.barra {
  align-items: center;
  isolation: isolate;
  border-radius: 7px;
  color: var(--texto-2);
  display: flex;
  font-size: 13px;
  height: 30px;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 11px;
  position: relative;
}

.barra::before {
  background: rgba(255, 255, 255, .07);
  border-radius: 7px;
  content: '';
  inset: 0;
  position: absolute;
  transform: scaleX(var(--v));
  transform-origin: left;
  transition: transform 1s var(--curva);
  z-index: -1;
}

.js .medidas:not(.vista) .barra::before {
  transform: scaleX(0);
}

.barra.norte {
  color: var(--texto);
}

.barra.norte::before {
  background: linear-gradient(90deg, var(--acento-forte), var(--acento));
  box-shadow: 0 0 22px -4px rgba(79, 140, 255, .7);
}

.barra b {
  font-family: var(--fonte-mono);
  font-weight: 500;
}

.medida-nota {
  color: var(--texto-3);
  font-size: 13.5px;
  margin-top: 16px;
}

.bloqueio {
  align-items: center;
  background: radial-gradient(80% 140% at 0% 0%, rgba(79, 140, 255, .08), transparent 60%), var(--elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  display: grid;
  gap: 28px 48px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  margin-top: 14px;
  padding: 30px 30px;
}

.bloqueio h3 {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.bloqueio h3 .i {
  color: var(--acento-claro);
}

.bloqueio-texto p {
  color: var(--texto-2);
  font-size: 15px;
}

.bloqueio-numeros {
  display: grid;
  gap: 0;
  margin: 0;
}

.bloqueio-numeros div {
  align-items: baseline;
  border-top: 1px solid var(--linha);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 13px 0;
}

.bloqueio-numeros div:first-child {
  border-top: 0;
}

.bloqueio-numeros dt {
  color: var(--texto-2);
  font-size: 14.5px;
}

.bloqueio-numeros dd {
  color: var(--texto-2);
  font-size: 14px;
  margin: 0;
  white-space: nowrap;
}

.bloqueio-numeros dd b {
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-right: 4px;
}

.bloqueio-numeros dd s {
  color: var(--texto-3);
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  margin-left: 8px;
}

.rodape-medida {
  color: var(--texto-3);
  font-size: 13px;
  margin-top: 18px;
  max-width: 760px;
}

/* ───────────── Sigilo ───────────── */

.sigilo {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cartao-grande {
  background: var(--elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  display: grid;
  gap: 28px;
  grid-column: span 4;
  overflow: hidden;
  padding: 30px;
}

.cartao-grande.containers {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.cartao-grande.anonima {
  align-items: center;
  background: radial-gradient(60% 90% at 85% 50%, rgba(79, 140, 255, .1), transparent 70%), var(--elevado);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

.cg-texto h3 {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.cg-texto h3 .i {
  color: var(--acento-claro);
}

.cg-texto p {
  color: var(--texto-2);
  font-size: 15px;
}

.cg-texto p + p {
  margin-top: 12px;
}

.cartao-grande.anonima img {
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .95);
  height: auto;
  width: 100%;
}

.caixas {
  align-items: center;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr auto 1fr;
}

.caixa {
  background: color-mix(in oklab, var(--cor) 8%, var(--fundo-2));
  border: 1px solid color-mix(in oklab, var(--cor) 35%, transparent);
  border-radius: 12px;
  box-shadow: 0 0 40px -18px var(--cor);
  padding: 16px;
}

.caixa-nome {
  color: var(--cor);
  font-family: var(--fonte-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.caixa-aba {
  align-items: center;
  background: rgba(255, 255, 255, .06);
  border-radius: 7px;
  color: var(--texto);
  display: flex;
  font-size: 13px;
  gap: 8px;
  padding: 7px 9px;
  position: relative;
}

.caixa-aba::before {
  background: var(--cor);
  border-radius: 2px;
  content: '';
  height: 50%;
  left: 2px;
  position: absolute;
  top: 25%;
  width: 3px;
}

.caixa-aba i {
  background: #ef4444;
  border-radius: 4px;
  height: 12px;
  width: 12px;
}

.caixa-conta {
  color: var(--texto-2);
  font-size: 13px;
  margin-top: 12px;
}

.caixa-conta span {
  color: var(--texto);
  font-weight: 550;
}

.caixa ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.caixa li {
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  color: var(--texto-3);
  font-family: var(--fonte-mono);
  font-size: 11px;
  padding: 3px 9px;
}

.caixa-muro {
  align-items: center;
  align-self: stretch;
  color: var(--texto-3);
  display: flex;
  justify-content: center;
  padding: 0 14px;
  position: relative;
}

.caixa-muro::before {
  background: repeating-linear-gradient(var(--linha-forte) 0 6px, transparent 6px 12px);
  bottom: 0;
  content: '';
  left: 50%;
  position: absolute;
  top: 0;
  width: 1px;
}

.caixa-muro .i {
  background: var(--elevado);
  border-radius: 50%;
  box-sizing: content-box;
  padding: 7px;
  position: relative;
}

/* ───────────── Origem ───────────── */

.origem {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* As camadas do Norte: o que é nosso por cima, o Chromium embaixo. */
.pilha {
  background: var(--elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  padding: 30px;
  perspective: 900px;
}

.camada {
  background: var(--fundo-2);
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  padding: 16px 18px;
  transform: rotateX(18deg);
  transform-origin: center bottom;
}

.camada p {
  color: var(--texto-2);
  font-size: 13.5px;
}

.camada b {
  color: var(--texto);
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 2px;
}

.camada.nossa {
  background: linear-gradient(135deg, rgba(43, 108, 245, .22), rgba(79, 140, 255, .06));
  border-color: rgba(79, 140, 255, .5);
  box-shadow: 0 16px 40px -16px rgba(43, 108, 245, .6);
}

.camada.base {
  opacity: .85;
}

.origem-links {
  display: grid;
  gap: 14px;
}

.link-cartao {
  align-items: center;
  background: var(--elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  display: flex;
  gap: 16px;
  padding: 22px;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}

.link-cartao:hover {
  background: var(--elevado-2);
  border-color: var(--linha-forte);
}

.link-cartao > .i {
  color: var(--acento-claro);
  height: 22px;
  width: 22px;
}

.link-cartao span {
  color: var(--texto-2);
  flex: 1;
  font-size: 14px;
}

.link-cartao b {
  color: var(--texto);
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 17px;
  font-weight: 600;
}

.link-cartao .seta {
  color: var(--texto-3);
  transition: transform .2s var(--curva), color .2s;
}

.link-cartao:hover .seta {
  color: var(--texto);
  transform: translate(2px, -2px);
}

/* Instalar */
.instalar,
.novidades,
.perguntas {
  margin-top: 96px;
}

.instalar-cabeca,
.novidades-cabeca {
  margin-bottom: 28px;
}

.instalar-cabeca h3,
.novidades-cabeca h3,
.perguntas h3 {
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -.035em;
  margin-bottom: 10px;
}

.instalar-cabeca p,
.novidades-cabeca p {
  color: var(--texto-2);
}

.novidades-cabeca a {
  color: var(--acento-claro);
}

.passos {
  counter-reset: passo;
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.passos li {
  background: var(--elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  counter-increment: passo;
  padding: 22px 22px 22px 70px;
  position: relative;
}

.passos li::before {
  align-items: center;
  border: 1px solid rgba(79, 140, 255, .5);
  border-radius: 50%;
  color: var(--acento-claro);
  content: counter(passo);
  display: flex;
  font-family: var(--fonte-mono);
  font-size: 13px;
  height: 30px;
  justify-content: center;
  left: 22px;
  position: absolute;
  top: 20px;
  width: 30px;
}

.passo-titulo {
  font-weight: 550;
  margin-bottom: 12px;
}

.passo-nota {
  color: var(--texto-3);
  font-size: 14px;
  margin-top: 12px;
}

.comando {
  background: #060607;
  border: 1px solid var(--linha);
  border-radius: 10px;
  position: relative;
}

.comando pre {
  color: var(--texto);
  font-family: var(--fonte-mono);
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0;
  overflow-x: auto;
  padding: 14px 56px 14px 16px;
}

.prompt {
  color: var(--texto-3);
  user-select: none;
}

.copiar {
  align-items: center;
  background: var(--elevado-2);
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  color: var(--texto-2);
  cursor: pointer;
  display: flex;
  height: 32px;
  justify-content: center;
  position: absolute;
  right: 9px;
  top: 9px;
  transition: color .15s, border-color .15s;
  width: 32px;
}

.copiar:hover {
  color: var(--texto);
}

.copiar.copiado {
  border-color: rgba(52, 211, 153, .6);
  color: #34d399;
}

.copiar .i {
  height: 15px;
  width: 15px;
}

.instalar-alt {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 22px;
}

.instalar-alt p {
  color: var(--texto-3);
  flex: 1;
  font-size: 14px;
  min-width: 280px;
}

/* Novidades: uma linha do tempo (o HTML vem do build.mjs). */
.versoes {
  border-left: 1px solid var(--linha-forte);
  margin-left: 15px;
  padding-left: 0;
}

.versao {
  padding: 0 0 36px 36px;
  position: relative;
}

.versao-marca {
  left: -6px;
  position: absolute;
  top: 9px;
}

.versao-marca span {
  background: var(--fundo);
  border: 1px solid var(--texto-3);
  border-radius: 50%;
  display: block;
  height: 11px;
  width: 11px;
}

.versao.atual .versao-marca span {
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: 0 0 0 4px rgba(79, 140, 255, .18), 0 0 16px rgba(79, 140, 255, .8);
}

.versao header {
  align-items: center;
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
}

.versao-num {
  align-items: center;
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  display: flex;
  flex: none;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 650;
  height: 44px;
  justify-content: center;
  text-decoration: none;
  width: 52px;
}

.versao.atual .versao-num {
  background: rgba(79, 140, 255, .12);
  border-color: rgba(79, 140, 255, .5);
  color: var(--acento-claro);
}

.versao h3 {
  font-size: 18px;
}

.versao-data {
  color: var(--texto-3);
  font-size: 13px;
  margin-top: 3px;
}

.versao-data code {
  font-size: .9em;
}

.versao-notas {
  color: var(--texto-2);
  font-size: 15px;
  max-width: 820px;
}

.versao-notas ul {
  margin: 0;
  padding-left: 18px;
}

.versao-notas li {
  margin: 0 0 9px;
}

.versao-notas li::marker {
  color: var(--texto-3);
}

.versao-notas strong {
  color: var(--texto);
  font-weight: 600;
}

.versao-notas p + p,
.versao-notas p + ul,
.versao-notas ul + p {
  margin-top: 10px;
}

.versao-notas a {
  color: var(--acento-claro);
}

.anteriores {
  padding: 0 0 8px 36px;
}

.anteriores summary {
  align-items: center;
  color: var(--texto-2);
  cursor: pointer;
  display: inline-flex;
  font-weight: 550;
  gap: 10px;
  list-style: none;
  margin-bottom: 26px;
}

.anteriores summary::-webkit-details-marker {
  display: none;
}

.anteriores summary span {
  background: var(--elevado-2);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  padding: 1px 9px;
}

.anteriores .versao {
  margin-left: -36px;
}

/* Perguntas */
.perguntas {
  max-width: 860px;
}

.perguntas h3 {
  margin-bottom: 20px;
}

.perguntas details {
  border-top: 1px solid var(--linha);
}

.perguntas details:last-child {
  border-bottom: 1px solid var(--linha);
}

.perguntas summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 17px;
  font-weight: 550;
  gap: 16px;
  justify-content: space-between;
  list-style: none;
  padding: 20px 0;
}

.perguntas summary::-webkit-details-marker {
  display: none;
}

.perguntas summary::after {
  color: var(--texto-3);
  content: '+';
  font-family: var(--fonte-mono);
  font-size: 20px;
  font-weight: 400;
  transition: transform .2s var(--curva);
}

.perguntas details[open] summary::after {
  transform: rotate(45deg);
}

.perguntas details p {
  color: var(--texto-2);
  max-width: 720px;
  padding: 0 0 22px;
}

.perguntas details a {
  color: var(--acento-claro);
}

/* ───────────── Rodapé ───────────── */

.rodape {
  border-top: 1px solid var(--linha);
  margin-top: 120px;
}

.rodape-dentro {
  align-items: center;
  display: grid;
  gap: 24px 32px;
  grid-template-columns: auto 1fr;
  margin: 0 auto;
  max-width: var(--largura);
  padding: 44px 24px 56px;
}

.rodape-marca {
  align-items: center;
  display: flex;
  gap: 14px;
}

.rodape-marca .marca-logo {
  height: 34px;
  width: 34px;
}

.rodape-marca p {
  color: var(--texto-3);
  font-size: 14px;
}

.rodape-marca b {
  color: var(--texto);
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 650;
}

.rodape-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: flex-end;
}

.rodape-links a {
  color: var(--texto-2);
  font-size: 14px;
  text-decoration: none;
}

.rodape-links a:hover {
  color: var(--texto);
}

.rodape-legal {
  color: var(--texto-3);
  font-size: 12.5px;
  grid-column: 1 / -1;
  line-height: 1.6;
}

/* ───────────── A bússola que acompanha a página ───────────── */

.bussola-guia {
  bottom: 22px;
  height: 92px;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 22px;
  transform: translateY(12px) scale(.94);
  transition: opacity .35s var(--curva), transform .35s var(--curva);
  width: 92px;
  z-index: 40;
}

.bussola-guia::before {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: rgba(14, 14, 17, .82);
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8);
  content: '';
  inset: 0;
  position: absolute;
}

.bussola-guia.visivel {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.bgu-mostrador {
  height: 100%;
  inset: 0;
  opacity: .8;
  position: absolute;
  width: 100%;
}

.bgu-agulha {
  height: 50%;
  left: 25%;
  position: absolute;
  top: 25%;
  transform: rotate(var(--rumo, 0deg));
  transition: transform .9s cubic-bezier(.34, 1.4, .5, 1);
  width: 50%;
}

.bussola-guia a {
  color: var(--texto-3);
  font-family: var(--fonte-mono);
  font-size: 10px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  transform: translate(-50%, -50%);
  transition: color .2s;
  width: 20px;
}

.bussola-guia a:hover,
.bussola-guia a.ativa {
  color: var(--acento-claro);
}

.bgu-n { left: 50%; top: 12%; }
.bgu-l { left: 88%; top: 50%; }
.bgu-s { left: 50%; top: 88%; }
.bgu-o { left: 12%; top: 50%; }

/* ───────────── Aparecer ao rolar ───────────── */

.js .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--curva), transform .7s var(--curva);
}

.js .revelar.visto {
  opacity: 1;
  transform: none;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sair-esq {
  to { opacity: 0; transform: translateX(-16px); }
}

@keyframes sair-dir {
  to { opacity: 0; transform: translateX(16px); }
}

@keyframes entrar-dir {
  from { opacity: 0; transform: translateX(16px); }
}

@keyframes entrar-esq {
  from { opacity: 0; transform: translateX(-16px); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .js .revelar {
    opacity: 1;
    transform: none;
  }
}

/* ───────────── Telas menores ───────────── */

@media (max-width: 1080px) {
  .grade-recursos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sigilo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cartao-grande {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .rotas {
    display: none;
  }

  .topo-acoes {
    margin-left: auto;
  }

  .abertura {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 104px;
    text-align: left;
  }

  .bussola-grande {
    grid-row: 1;
    max-width: 280px;
  }

  .medidas,
  .origem,
  .cartao-grande.containers,
  .cartao-grande.anonima,
  .bloqueio {
    grid-template-columns: 1fr;
  }

  .atalhos {
    grid-template-columns: 1fr;
  }

  .secao-cabeca {
    gap: 8px;
    grid-template-columns: 1fr;
  }

  .cardeal {
    font-size: 110px;
  }

  .j-endereco {
    display: none;
  }
}

@media (max-width: 640px) {
  .secao {
    padding-top: 96px;
  }

  .grade-recursos,
  .sigilo {
    grid-template-columns: 1fr;
  }

  .cartao-grande,
  .recurso.largo {
    grid-column: auto;
  }

  .cartao-grande {
    padding: 22px;
  }

  .caixas {
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .caixa-muro {
    padding: 6px 0;
  }

  .caixa-muro::before {
    display: none;
  }

  .janela {
    aspect-ratio: 4 / 3.4;
    font-size: 11px;
  }

  .j-lateral {
    width: 34%;
  }

  .j-fixos {
    display: none;
  }

  .passos li {
    padding-left: 22px;
    padding-top: 62px;
  }

  .rodape-dentro {
    grid-template-columns: 1fr;
  }

  .rodape-links {
    justify-content: flex-start;
  }

  .bussola-guia {
    bottom: 14px;
    height: 72px;
    right: 14px;
    width: 72px;
  }

  .bussola-guia a {
    font-size: 9px;
  }
}