/* FAQ editorial de HUBI. Requiere tokens.css y base.css. */
.cj-faq {
  width: calc(100% - 2 * var(--m, var(--s-6)));
  max-width: 1040px;
  margin-inline: auto;
  padding-block: clamp(var(--s-9), 8vw, calc(var(--s-10) + var(--s-8)));
  color: var(--text);
  font-family: var(--font-sans);
  scroll-margin-top: calc(var(--header-h) + var(--s-6));
}
.cj-faq-heading {
  max-width: none;
  margin: 0 0 clamp(var(--s-7), 5vw, var(--s-9));
  text-align: center;
  font: 600 clamp(34px, 4vw, 62px)/1.05 var(--font-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.cj-faq-list {
  max-width: 860px;
  margin-inline: auto;
  border-top: 1px solid var(--line-strong);
}
.cj-faq-item {
  border-bottom: 1px solid var(--line);
}
.cj-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: var(--control-lg);
  padding: var(--s-6) var(--s-2);
  color: var(--text-2);
  font: 500 clamp(var(--fs-md), 1.5vw, var(--fs-lg))/var(--lh-snug) var(--font-sans);
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.cj-faq-item > summary::-webkit-details-marker {
  display: none;
}
.cj-faq-item > summary > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cj-faq-item[open] > summary {
  color: var(--text);
}
.cj-faq-item > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
  background: var(--surface-1);
  color: var(--text);
}
.cj-faq-icon {
  position: relative;
  flex: 0 0 var(--s-6);
  width: var(--s-6);
  height: var(--s-6);
  color: var(--text-3);
  transition: color var(--dur-1) var(--ease);
}
.cj-faq-icon::before,
.cj-faq-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--s-3);
  height: 1.5px;
  margin: auto;
  border-radius: var(--r-pill);
  background: currentColor;
}
.cj-faq-icon::after {
  transform: rotate(90deg);
  transition: transform var(--dur-2) var(--ease);
}
.cj-faq-item[open] .cj-faq-icon {
  color: var(--accent-text);
}
.cj-faq-item[open] .cj-faq-icon::after {
  transform: rotate(90deg) scaleX(0);
}
.cj-faq-answer {
  max-width: 72ch;
  padding: 0 calc(var(--s-6) + var(--s-2)) var(--s-6) var(--s-2);
  color: var(--text-3);
  font-size: var(--fs-md);
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.cj-faq-answer p {
  margin: 0;
}
.cj-faq-answer strong {
  color: var(--text-2);
  font-weight: 600;
}
@media (hover: hover) {
  .cj-faq-item > summary:hover {
    color: var(--text);
    background: var(--surface-1);
  }
  .cj-faq-item > summary:hover .cj-faq-icon {
    color: var(--accent-text);
  }
}
@media (max-width: 640px) {
  .cj-faq-item > summary {
    gap: var(--s-4);
    padding-block: var(--s-5);
  }
  .cj-faq-answer {
    padding-right: var(--s-2);
    font-size: var(--fs-sm);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cj-faq-item > summary,
  .cj-faq-icon,
  .cj-faq-icon::after {
    transition: none;
  }
}