@font-face {
  font-family: "Anisette Black";
  src: url("fonts/Anisette Black Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Anisette Bold";
  src: url("fonts/Anisette Bold Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Anisette Light";
  src: url("fonts/Anisette Light Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Anisette Medium";
  src: url("fonts/Anisette Medium Regular.woff2") format("woff2");
}

body {
  margin: 0;
  background: #000;
  color: #f19fca;
  font-family: "Anisette Light", sans-serif;
  text-align: center;
}

::selection {
  background: #f19fca;
  color: #000;
}

.top {
  padding: 2rem 1rem;
}
.platform {
  font-size: 1rem;
  margin-bottom: 1rem;
}
.logo-evento {
  width: 200px;
  margin: 1rem auto;
  display: block;
}
#contador {
  font-size: 1.5rem;
  margin: 1rem 0;
}
#btn-ver {
  background: #f19fca;
  color: #000;
  padding: 0.7rem 1.5rem;
  border: none;
  cursor: pointer;
  font-family: "Anisette Bold", sans-serif;
}
#btn-ver:hover {
  background: #fff;
}

.artistas, .sponsors {
  padding: 2rem 1rem;
}
.grid-artistas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.grid-sponsors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
}
.tarjeta {
  padding: 1rem;
  border-radius: 10px;
}
.artista {
  background: linear-gradient(to bottom, #000, #f19fca);
}
.artista img {
  width: 100%;
  border-radius: 10px;
}
.sponsor {
  background: linear-gradient(to bottom, #000, #666);
}
.sponsor img {
  width: 100%;
}

.faq {
  padding: 2rem 1rem;
  text-align: left;
}
.faq-item {
  margin-bottom: 1rem;
}
.faq-item h3 {
  color: #fff;
}

.patro-logos img {
  width: 100px;
  margin: 0 1rem;
}

footer {
  padding: 1rem;
  border-top: 1px solid #f19fca;
}
.footer-menu {
  margin-top: 1rem;
}
.footer-menu a {
  color: #f19fca;
  margin: 0 1rem;
  text-decoration: none;
}
.footer-menu a:hover {
  text-decoration: underline;
}