@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/exo2.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plex-mono-600.woff2") format("woff2");
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: #FFFFFF; color: #1F2430; }
:focus-visible { outline: 2px solid #3FA110; outline-offset: 2px; }

#site-nav { --nav-p: 1; --nav-t: 1; --nav-fg: #1F2430; color: var(--nav-fg); border-bottom: 1px solid rgba(226, 230, 224, var(--nav-p)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#site-nav .nav-camada-vidro { background-color: rgba(18, 22, 28, 0.35); opacity: calc(1 - var(--nav-p)); }
#site-nav .nav-camada-solida { background-color: rgba(255, 255, 255, 0.82); opacity: var(--nav-p); }
#site-nav .marca-simbolo-claro { opacity: calc(1 - var(--nav-t)); }
#site-nav .marca-simbolo-escuro { opacity: var(--nav-t); }
#nav-menu[hidden] { display: none; }

.grade-noite {
  background-color: #12161C;
  background-image: linear-gradient(#1E252E 1px, transparent 1px), linear-gradient(90deg, #1E252E 1px, transparent 1px);
  background-size: 32px 32px;
}

.grade-clara {
  background-color: #FFFFFF;
  background-image: linear-gradient(#EEF1EC 1px, transparent 1px), linear-gradient(90deg, #EEF1EC 1px, transparent 1px);
  background-size: 16px 16px;
}

.faixa {
  flex: 1;
  max-width: 168px;
  height: 4px;
  border-radius: 1px;
  background: repeating-linear-gradient(90deg, #3FA110 0 28px, transparent 28px 56px);
}

.ponto::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ponto, currentColor); }

.ficha-etapas li::before { content: ""; height: 6px; border-radius: 2px; background: #2A313B; }
.ficha-etapas li.feita, .ficha-etapas li.atual { color: #E8EBE6; }
.ficha-etapas li.feita::before { background: #6ECB3B; }
.ficha-etapas li.atual::before { background: #6BA8E0; }

.corte-cota::before, .corte-cota::after { content: ""; flex: 1; width: 1px; background: #87908A; }

.viagem { left: var(--inicio); width: var(--duracao); }

input[type="range"] { accent-color: #2A6E0B; }