html { scroll-behavior: smooth; }
body { font-family: Inter, system-ui, sans-serif; }
.font-display { font-family: "Bricolage Grotesque", system-ui, sans-serif; }

.font-marca { font-family: "Cinzel", Georgia, serif; }

.franja {
  height: 6px;
  background: linear-gradient(to right, #D60A0A 0 62%, #C9A55C 62% 88%, #0B0B0B 88% 100%);
}
.on-dark .franja, .franja-oscura {
  background: linear-gradient(to right, #D60A0A 0 62%, #C9A55C 62% 100%);
}

.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 700;
  font-size: .9rem;
  background: #fff;
  color: #141414;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .12);
  transition: background .2s, color .2s;
}
.chip-filtro:hover { background: #F8F1E2; }
.chip-filtro[aria-pressed="true"] { background: #141414; color: #fff; box-shadow: none; }
.chip-filtro .cuenta { font-size: .75rem; opacity: .6; }

.carrusel { scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }

.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.btn-wsp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  transition: background .2s, transform .2s;
}
.btn-wsp:hover { background: #1DB954; transform: translateY(-1px); }

.falta {
  display: inline-block;
  border: 1px dashed rgba(163, 8, 8, .55);
  background: rgba(214, 10, 10, .06);
  color: #A30808;
  font-family: Inter, system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  padding: .2rem .5rem;
  border-radius: .5rem;
}
.on-dark .falta {
  color: #FFE3E4;
  border-color: rgba(255, 227, 228, .6);
  background: rgba(255, 255, 255, .08);
}

.hueco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  text-align: center;
  border: 2px dashed rgba(20, 20, 20, .18);
  padding: 1rem;
}
.on-dark .hueco { border-color: rgba(255, 255, 255, .3); }

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

.opcion { position: relative; display: inline-flex; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .6rem 1.1rem;
  font-weight: 700;
  font-size: .95rem;
  background: #fff;
  color: #141414;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .15);
  transition: background .2s, color .2s;
}
.opcion:hover span { background: #F8F1E2; }
.opcion input:checked + span { background: #7A1016; color: #fff; box-shadow: none; }
.opcion input:focus-visible + span { outline: 3px solid #C9A55C; outline-offset: 2px; }