/* styles/frecuentes.css */
.freq {
  --fq-bg: #131f36;
  --fq-blue: #5b78f0;
  --fq-text: #fff;
  --fq-muted: rgba(255, 255, 255, 0.7);
  background: var(--fq-bg);
  color: var(--fq-text);
  font-family: "Inter", system-ui, sans-serif;
  padding: clamp(64px, 9vw, 120px) clamp(16px, 5vw, 64px);
}
.freq__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.freq__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 32px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fq-blue);
}
.freq__title {
  margin-top: 20px;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.2;
}

/* ---------- Pills ---------- */
.freq__pills {
  list-style: none;
  margin-top: clamp(32px, 4vw, 52px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 960px;
}
.freq__pills li {
  font-size: 12.5px;
  color: var(--fq-muted);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  padding: 11px 20px;
  background: rgba(255, 255, 255, 0.02);
  transition:
    border-color 0.25s,
    color 0.25s,
    background 0.25s,
    transform 0.25s;
  cursor: default;
}
.freq__pills li:hover {
  border-color: var(--fq-blue);
  color: #fff;
  background: rgba(91, 120, 240, 0.12);
  transform: translateY(-2px);
}

/* ---------- Logo ---------- */
.freq__logo {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(28px, 4vw, 48px);
}
.freq__logo img {
  display: block;
  width: min(260px, 60vw);
  height: auto;
}

/* ---------- Animación de entrada (la activa el JS) ---------- */
.js .freq__eyebrow,
.js .freq__title,
.js .freq__pills li,
.js .freq__logo {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    border-color 0.25s,
    color 0.25s,
    background 0.25s;
}
.js .freq .is-in {
  opacity: 1;
  transform: none;
}
.js .freq .freq__pills li.is-in:hover {
  transform: translateY(-2px);
}

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .freq__eyebrow {
    letter-spacing: 0.18em;
  }
  .freq__pills {
    gap: 10px;
  }
  .freq__pills li {
    font-size: 12px;
    padding: 10px 16px;
  }
  .freq__logo {
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .freq__eyebrow,
  .js .freq__title,
  .js .freq__pills li,
  .js .freq__logo {
    opacity: 1;
    transform: none;
    transition: none;
  }
}