@font-face {
  font-family: "Xolonium";
  src: url("/assets/xolonium-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --azul: #011129;
  --ouro: #b68442;
  --ouro-claro: #eabf76;
  --prata: #d5d6d9;
  --superficie: #081225;
  --ouro-brilho: #f6d391;
  font-family: "Source Sans 3", system-ui, sans-serif;
  color: var(--prata);
  background: var(--azul);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }

.cartao {
  width: min(100% - 40px, 520px);
  margin-inline: auto;
  padding-block: 56px 40px;
}

.apresentacao { text-align: center; margin-bottom: 32px; }
.marca { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.marca img { flex: none; object-fit: contain; }
.marca__sufixo { color: var(--ouro-claro); }
h1 { max-width: 100%; margin: 0; overflow-wrap: anywhere; font: 400 clamp(1.4375rem, 5.7vw, 1.875rem)/1.3 "Xolonium", sans-serif; }
.descricao { max-width: 400px; margin: 24px auto 16px; font-size: 1.5rem; line-height: 1.35; text-wrap: balance; }
.fundador { margin: 0; font-size: 1.0625rem; line-height: 1.5; text-wrap: balance; }
.fundador__separador { color: var(--ouro-claro); padding-inline: 3px; }

.canais { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.canais li { min-width: 0; }
.canal {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 16px 20px;
  border: 1px solid #344057;
  border-radius: 10px;
  color: var(--prata);
  background: var(--superficie);
  text-decoration: none;
  -webkit-tap-highlight-color: rgb(234 191 118 / 20%);
}

.canal__texto { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.canal__titulo { display: block; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.canal__apoio { display: block; margin-top: 3px; font-size: 1rem; line-height: 1.35; }
.icone, .seta { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icone { width: 24px; height: 24px; color: var(--ouro-claro); }
.seta { width: 18px; height: 18px; color: var(--ouro-claro); }
.canal--principal { min-height: 72px; border-color: var(--ouro-claro); background: var(--ouro-claro); color: var(--azul); }
.canal--principal .icone, .canal--principal .seta { color: inherit; }
.canal--pendente { border-style: dashed; background: transparent; }
.canal--pendente .icone { color: var(--prata); }
a.canal:focus-visible { outline: 3px solid var(--ouro-brilho); outline-offset: 4px; }
a.canal:active { border-color: var(--ouro-claro); }

@media (hover: hover) {
  a.canal:hover { border-color: var(--ouro); background: #122039; }
  a.canal--principal:hover { border-color: var(--ouro-brilho); background: var(--ouro-brilho); }
}

@media (max-width: 480px) {
  .cartao { padding-block: 32px; }
  .apresentacao { margin-bottom: 26px; }
  .descricao { font-size: 1.375rem; margin-top: 22px; }
  .canal { padding: 15px 16px; gap: 12px; }
}

@media (max-width: 350px) {
  .cartao { width: calc(100% - 32px); padding-block: 24px; }
  .marca { gap: 10px; }
  .marca img { width: 34px; height: auto; }
  .canal { padding-inline: 12px; gap: 10px; }
  .canal__titulo { font-size: 1.125rem; }
}

@media (forced-colors: active) {
  .canal, .canal--principal { border: 1px solid LinkText; }
  a.canal:focus-visible { outline-color: Highlight; }
}