:root {
  --red: #f31212;
  --blue: #003ed3;
  --green: #15ba2f;
  --yellow: #f9d607;
  --white: #fefefe;
  --ink: #171923;
  --muted: #626777;
  --line: #ececf1;
  --surface: #ffffff;
  --page: #f7f8fc;
  --radius: 20px;
  --shadow: 0 8px 24px rgba(23, 25, 35, 0.06);

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  background: var(--page);

  color: var(--ink);

  font-family:

    Inter,

    ui-sans-serif,

    system-ui,

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    sans-serif;

  -webkit-font-smoothing: antialiased;

}



a {

  color: inherit;

}



.topbar {

  height: 7px;

  background: linear-gradient(90deg,

      var(--red) 0 10%,

      var(--blue) 10% 40%,

      var(--green) 40% 70%,

      var(--yellow) 70% 100%);

}



.container {

  width: min(1120px, calc(100% - 40px));

  margin: 0 auto;

}



header {

  padding: 44px 0 30px;

}



.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--red);

  background: #fff0f0;

  border-radius: 999px;

  padding: 8px 12px;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.07em;

  text-transform: uppercase;

}



.eyebrow-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--red);

}



h1 {

  margin: 18px 0 12px;

  font-size: clamp(2.3rem, 5vw, 4.1rem);

  line-height: 0.99;

  letter-spacing: -0.055em;

}



h1 span {

  color: var(--red);

}



.intro {

  margin: 0;

  color: var(--muted);

  font-size: 1.05rem;

  line-height: 1.65;

}



.toolbar {

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 22px 0 18px;

  border-top: 1px solid var(--line);

}



.results-count {

  flex: 0 0 auto;

  white-space: nowrap;

  color: var(--muted);

  font-size: 0.9rem;

}



.results-count strong {

  color: var(--ink);

}



.search-wrap {

  position: relative;

  flex: 1 1 auto;

  min-width: 0;

  width: auto;

}



.search-icon {

  position: absolute;

  left: 15px;

  top: 50%;

  transform: translateY(-50%);

  color: #7b8090;

  pointer-events: none;

}



.search {

  width: 100%;

  border: 1px solid #e2e4eb;

  border-radius: 12px;

  background: var(--white);

  padding: 13px 14px 13px 43px;

  font: inherit;

  outline: none;

  transition:

    border-color 0.2s,

    box-shadow 0.2s;

}



.search:focus {

  border-color: var(--blue);

  box-shadow: 0 0 0 3px rgba(0, 62, 211, 0.1);

}



.grid {

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 16px;

  padding-bottom: 56px;

}



.profile-card {

  position: relative;

  display: flex;

  min-width: 0;

  flex-direction: column;

  align-items: center;

  padding: 25px 14px 20px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: var(--surface);

  text-align: center;

  text-decoration: none;

  box-shadow: 0 2px 5px rgba(23, 25, 35, 0.015);

  transition:

    transform 0.22s ease,

    box-shadow 0.22s ease,

    border-color 0.22s ease;

}



.profile-card::before {

  content: "";

  position: absolute;

  inset: 0 0 auto;

  height: 3px;

  background: var(--platform-color, var(--red));

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.22s ease;

}



.profile-card[hidden] {

  display: none !important;

}



.profile-card:hover,

.profile-card:focus-visible {

  transform: translateY(-5px);

  border-color: #ffd0d0;

  box-shadow: var(--shadow);

  outline: none;

}



.profile-card:hover::before,

.profile-card:focus-visible::before {

  transform: scaleX(1);

}



.avatar {

  display: grid;

  place-items: center;

  width: 88px;

  height: 88px;

  margin-bottom: 16px;

  border-radius: 50%;

  padding: 3px;

  background: conic-gradient(var(--red),

      #ff8b36,

      var(--yellow),

      var(--red));

}



.avatar-inner {

  display: grid;

  place-items: center;

  width: 100%;

  height: 100%;

  overflow: hidden;

  border: 3px solid var(--white);

  border-radius: 50%;

  background: #f2f3f7;

  color: var(--ink);

  font-size: 1.4rem;

  font-weight: 850;

  letter-spacing: -0.05em;

}



.avatar-inner img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.handle {

  max-width: 100%;

  overflow-wrap: anywhere;

  font-size: 0.8rem;

  font-weight: 750;

  line-height: 1.35;

}



.visit {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-top: 12px;

  color: var(--blue);

  font-size: 0.78rem;

  font-weight: 750;

}



.visit svg {

  transition: transform 0.2s ease;

}



.profile-card:hover .visit svg {

  transform: translate(2px, -2px);

}



.empty {

  display: none;

  padding: 40px 20px 60px;

  color: var(--muted);

  text-align: center;

}



/** Seção Sobre **/

.about-section {

  padding: 64px 0;

  border-top: 1px solid var(--line);

  background: var(--white);

}



.about-layout {

  display: grid;

  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr);

  align-items: start;

  gap: clamp(32px, 6vw, 76px);

}



.about-copy {

  max-width: 680px;

}



.about-eyebrow {

  display: inline-block;

  color: var(--red);

  font-size: 0.78rem;

  font-weight: 850;

  letter-spacing: 0.09em;

  line-height: 1.4;

  text-transform: uppercase;

}



.about-copy h2 {

  max-width: 650px;

  margin: 14px 0 22px;

  font-size: clamp(1.85rem, 3.4vw, 2.65rem);

  line-height: 1.1;

  letter-spacing: -0.045em;

}



.about-copy p {

  margin: 0 0 16px;

  color: var(--muted);

  font-size: 1.02rem;

  line-height: 1.8;

}



.about-contact {

  padding: 28px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: var(--page);

}



.contact-icon {

  display: grid;

  place-items: center;

  width: 42px;

  height: 42px;

  margin-bottom: 18px;

  border-radius: 13px;

  background: #fff0f0;

  color: var(--red);

  font-size: 1.35rem;

  font-weight: 800;

}



.about-contact h3 {

  margin: 0;

  font-size: 1.25rem;

  line-height: 1.3;

  letter-spacing: -0.025em;

}



.about-contact>p {

  margin: 12px 0 0;

  color: var(--muted);

  font-size: 0.94rem;

  line-height: 1.7;

}



.contact-links {

  display: grid;

  gap: 10px;

  margin-top: 22px;

}



.contact-links a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 13px 15px;

  border: 1px solid #e2e4eb;

  border-radius: 11px;

  background: var(--white);

  color: var(--blue);

  font-size: 0.92rem;

  font-weight: 750;

  text-decoration: none;

  transition:

    border-color 0.2s ease,

    background 0.2s ease,

    transform 0.2s ease;

}



.contact-links a:hover,

.contact-links a:focus-visible {

  transform: translateY(-1px);

  border-color: var(--blue);

  background: #f3f6ff;

  outline: none;

}



.contact-email {

  overflow-wrap: anywhere;

  font-size: 0.83rem !important;

}



.contact-email a {

  color: var(--blue);

  font-weight: 700;

  text-underline-offset: 3px;

}



footer {

  border-top: 1px solid var(--line);

  padding: 22px 0 30px;

  color: var(--muted);

  font-size: 0.82rem;

  line-height: 1.6;

}



footer strong {

  color: var(--ink);

}



@media (max-width: 900px) {

  .grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}



@media (max-width: 640px) {

  .container {

    width: min(100% - 28px, 520px);

  }



  header {

    padding: 34px 0 25px;

  }



  .toolbar {

    flex-direction: row;

    align-items: center;

    gap: 10px;

  }



  .search-wrap {

    flex: 1 1 auto;

    min-width: 0;

    width: auto;

  }



  .results-count {

    flex-shrink: 0;

    white-space: nowrap;

    font-size: 0.8rem;

  }



  .grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    padding-bottom: 40px;

  }



  .profile-card {

    padding: 20px 10px 17px;

    border-radius: 16px;

  }



  .avatar {

    width: 74px;

    height: 74px;

  }



  .handle {

    font-size: 0.84rem;

  }



  .visit {

    font-size: 0.73rem;

  }



  .about-section {

    padding: 44px 0;

  }



  .about-layout {

    grid-template-columns: 1fr;

    gap: 24px;

  }



  .about-copy p {

    font-size: 1rem;

  }



  .about-contact {

    padding: 22px;

  }

}



@media (max-width: 350px) {

  .grid {

    grid-template-columns: 1fr;

  }



  .toolbar {

    gap: 8px;

  }



  .results-count {

    font-size: 0.74rem;

  }

}



@media (prefers-reduced-motion: reduce) {



  *,

  *::before,

  *::after {

    scroll-behavior: auto !important;

    transition: none !important;

  }

}





/** Seções do diretório **/

.directory-section {

  margin: 0;

}



.section-heading {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 12px;

  margin: 4px 0 16px;

}



.section-heading h2 {

  margin: 0;

  font-size: clamp(1.35rem, 2.5vw, 1.8rem);

  line-height: 1.2;

  letter-spacing: -0.035em;

}



.section-count {

  flex: 0 0 auto;

  color: var(--muted);

  font-size: 0.82rem;

  white-space: nowrap;

}



.section-divider {

  border: 0;

  border-top: 1px solid var(--line);

  margin: 0 0 24px;

}



#channels.grid {

  padding-bottom: 28px;

}



#profiles.grid {

  padding-bottom: 56px;

}



.channel-avatar {

  background: conic-gradient(#15ba2f, #80e69a, #d6f7df, #15ba2f);

}



.channel-card::before {

  background: var(--green);

}



.channel-card:hover,

.channel-card:focus-visible {

  border-color: #bcebc7;

}



.channel-card .visit {

  color: #12852a;

}



.directory-section[hidden],

.profile-card[hidden] {

  display: none !important;

}



@media (max-width: 640px) {

  .section-heading {

    margin-bottom: 13px;

  }



  .section-heading h2 {

    font-size: 1.35rem;

  }



  #channels.grid {

    padding-bottom: 22px;

  }



  #profiles.grid {

    padding-bottom: 40px;

  }



  .section-divider {

    margin-bottom: 20px;

  }

}





/** Navegação por plataforma **/

.platform-filters {

  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  padding: 0 0 20px;

}



.filter-chip {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-height: 40px;

  padding: 8px 13px;

  border: 1px solid var(--platform-color, #dfe2ea);

  border-radius: 999px;

  background: #fff;

  color: var(--ink);

  font: inherit;

  font-size: .88rem;

  font-weight: 700;

  cursor: pointer;

  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;

}



.filter-chip:hover,

.filter-chip:focus-visible {

  background: var(--chip-hover, #f5f6fa);

  transform: translateY(-1px);

  outline: none;

  box-shadow: 0 3px 10px rgba(23, 25, 35, .07);

}



.filter-chip.is-active {

  background: var(--chip-hover, #f5f6fa);

  box-shadow: inset 0 0 0 1px currentColor;

}



```css .filter-icon {
  display: inline-flex;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.filter-icon svg,
svg.filter-icon {
  width: 18px;
  height: 18px;
}

.all-icon {
  font-size: 17px;
}

.whatsapp-icon {
  color: #25d366;
}

.instagram-icon {
  color: #e4405f;
}

.twitter-icon {
  color: #000;
}

.youtube-icon {
  color: #ff0033;
}

.bluesky-icon {
  color: #0085ff;
}

.reddit-icon {
  color: #ff4500;
}

.filter-chip[data-filter="whatsapp"] {
  --platform-color: #b9e8c8;
  --chip-hover: #effaf3;

}



.filter-chip[data-filter="instagram"] {
  --platform-color: #f0c3dc;
  --chip-hover: #fff2f9;

}



.filter-chip[data-filter="youtube"] {
  --platform-color: #ffc8c5;
  --chip-hover: #fff2f1;

}



.filter-chip[data-filter="bluesky"] {
  --platform-color: #b9dcff;
  --chip-hover: #f0f7ff;

}



.filter-chip[data-filter="reddit"] {
  --platform-color: #ffd0b5;
  --chip-hover: #fff5ef;

}



.filter-chip[data-filter="all"] {
  --platform-color: #dfe2ea;
  --chip-hover: #f3f4f8;

}



.directory-section[hidden],

.profile-card[hidden] {

  display: none !important;

}



.section-heading {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 12px;

  margin: 8px 0 16px;

}



.section-heading h2 {

  margin: 0;

  font-size: clamp(1.25rem, 2.2vw, 1.65rem);

  letter-spacing: -.035em;

}



.section-count {

  flex: 0 0 auto;

  color: var(--muted);

  font-size: .85rem;

}



.section-divider {

  border: 0;

  border-top: 1px solid var(--line);

  margin: 0 0 24px;

}



.directory-section {

  margin-bottom: 0;

}



.platform-avatar {

  background: #f1f3f8;

}



.platform-mark {

  border-color: #fff;

  font-size: 1.6rem;

}



.youtube-avatar .platform-mark {

  color: #e62117;

  background: #fff2f1;

}



.bluesky-avatar .platform-mark {

  color: #1185fe;

  background: #f0f7ff;

}



.reddit-avatar .platform-mark {

  color: #ff4500;

  background: #fff5ef;

}



.channel-avatar .platform-mark {

  color: #159447;

  background: #effaf3;

}



.empty {

  display: none;

  padding: 32px 20px 50px;

  color: var(--muted);

  text-align: center;

}



@media (max-width:640px) {

  .platform-filters {

    gap: 7px;

    padding-bottom: 16px;

  }



  .filter-chip {

    min-height: 37px;

    padding: 7px 10px;

    font-size: .82rem;

  }



  .section-heading {

    margin-bottom: 13px;

  }



  .section-divider {

    margin-bottom: 20px;

  }

}





/** Oculta os divisores quando uma das seções vizinhas não está visível. **/

.section-divider[hidden] {

  display: none !important;

}





/** Cores de hover por plataforma **/

.profile-card[data-platform="whatsapp"] {
  --platform-color: #25a85a;

}



.profile-card[data-platform="instagram"] {
  --platform-color: #c13584;

}



.profile-card[data-platform="youtube"] {
  --platform-color: #e62117;

}



.profile-card[data-platform="bluesky"] {
  --platform-color: #1185fe;

}



.profile-card[data-platform="reddit"] {
  --platform-color: #ff4500;

}



.profile-card[data-platform="whatsapp"]:hover,

.profile-card[data-platform="whatsapp"]:focus-visible {

  border-color: #bcebc7;

}



.profile-card[data-platform="instagram"]:hover,

.profile-card[data-platform="instagram"]:focus-visible {

  border-color: #f0c3dc;

}



.profile-card[data-platform="youtube"]:hover,

.profile-card[data-platform="youtube"]:focus-visible {

  border-color: #ffc8c5;

}



.profile-card[data-platform="bluesky"]:hover,

.profile-card[data-platform="bluesky"]:focus-visible {

  border-color: #b9dcff;

}



.profile-card[data-platform="reddit"]:hover,

.profile-card[data-platform="reddit"]:focus-visible {

  border-color: #ffd0b5;

}

/* Twitter (X) */
.filter-icon.twitter-icon {
  color: #000;
}

.filter-chip[data-filter="twitter"] {
  --platform-color: #c7c7c7;
  --chip-hover: #f1f1f1;
}

.profile-card[data-platform="twitter"] {
  --platform-color: #000;
}

.profile-card[data-platform="twitter"]:hover,
.profile-card[data-platform="twitter"]:focus-visible {
  border-color: #bdbdbd;
}

.twitter-avatar {
  background: conic-gradient(#000, #777, #000);
}

.twitter-avatar .platform-mark {
  color: #000;
  background: #f1f1f1;
}