/* z-index: 0 (not just position:relative) is required, not decorative —
   position:relative with z-index left at its default 'auto' does NOT
   establish a stacking context of its own, so a negative-z-index
   descendant like .bep-faq-hangul isn't scoped to this element at all: it
   bubbles up and gets compared in the nearest ancestor that DOES establish
   one (effectively the page root). This section's own background-color
   then paints as an ordinary in-flow box within THAT outer context — a
   layer above negative-z-index content — so the hangul ends up hidden
   behind it. .bep-beneficios-hangul (beneficios.css) uses the same
   z-index:-1 without this problem only because .bep-beneficios has no
   background-color of its own to hide behind — the underlying stacking
   quirk is the same there, it just never had anything to visibly break.
   Giving .bep-faq an explicit z-index forces its own local stacking
   context, so -1 on the hangul is now scoped to just this section: above
   its own background (painted first within that context), below normal
   in-flow content — the same relationship .bep-beneficios-hangul relies on. */
.bep-faq {
  position: relative;
  z-index: 0;
  width: 100%;
  scroll-margin-top: var(--bep-navbar-height);
  padding-top: var(--bep-section-padding-y);
  padding-right: var(--bep-container-padding);
  padding-bottom: var(--bep-section-padding-y);
  padding-left: var(--bep-container-padding);
  background-color: #edf1f4;
}

.bep-faq-container {
  max-width: var(--bep-container-max-width);
  margin: 0 auto;
  padding: 0 var(--bep-container-padding);
}

/* Reveal resting state (contexto.js/diferencial.js/casos-de-uso.js convention) */
.bep-faq-eyebrow {
  text-align: center;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(0.75rem, 1.25vw, 1rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bep-color-titulo-azul);
  opacity: 0;
  transform: translateY(20px);
}

.bep-faq-title {
  margin-top: 12px;
  text-align: center;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 500;
  font-style: normal;
  font-size: var(--bep-font-section-title-size);
  color: var(--bep-color-titulo-azul);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(20px);
}

/* Grows naturally with its content now — no fixed height, no internal
   scroll/snap, no custom scrollbar (all of that came out along with
   .bep-faq-scroll-container). Just a centered column of item rows,
   each toggled open/closed independently by faq.js. */
/* Reveal resting state for the list as one block (faq.js) — same convention
   as the eyebrow/title above, applied to the group instead of per-question. */
.bep-faq-list {
  max-width: 860px;
  margin: 40px auto 0;
  opacity: 0;
  transform: translateY(20px);
}

.bep-faq-item {
  border-bottom: 1px solid #5e7a86;
}

.bep-faq-item:last-child {
  border-bottom: none;
}

/* Plain <button> now (not <summary>) — JS (faq.js) toggles .is-active on
   the parent .bep-faq-item on click; each item is independent (no "close
   the others" logic), so any number can be open at once. */
.bep-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
  padding: 20px 0;
  padding-right: 20px;
  text-align: left;
  cursor: pointer;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  font-size: 1.5625rem;
  line-height: normal;
  color: var(--bep-color-titulo-azul);
}

/* + when closed, × when open — driven by .is-active (faq.js), not a
   native attribute anymore. */
.bep-faq-question::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bep-color-texto-suave);
}

.bep-faq-item.is-active .bep-faq-question::after {
  content: '\00d7';
}

/* Same grid-template-rows (0fr -> 1fr) technique as
   .bep-beneficios-item-description-wrap (beneficios.css): animates to the
   answer's real rendered height instead of a guessed fixed height, and
   transitions cleanly without needing display:none <-> block at all.
   600ms (up from 300ms) — slow enough to read as a deliberate, notable
   motion instead of a snap; same duration applies to both open and close
   since it's a single transition on the property itself, not a
   direction-specific one. */
.bep-faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 600ms ease;
}

.bep-faq-item.is-active .bep-faq-answer-wrap {
  grid-template-rows: 1fr;
}

/* margin-bottom (not padding-bottom) is what let the previous text-peek bug
   happen — see the fix from the prior turn. But margin has the same
   "counts toward the grid item's own minimum size" issue Beneficios also
   has (its .bep-beneficios-item-description-wrap sits at 12px instead of a
   true 0 when collapsed, from its own margin-top) — a grid item's margin
   isn't clipped by its own overflow:hidden (margin is outside the border
   box entirely) and doesn't collapse through a grid formatting context, so
   it still padded out .bep-faq-answer-wrap's "collapsed" height even
   though no text was visible in it anymore. Beneficios' 12px residual is
   small enough to go unnoticed with nothing else nearby; this section's
   20px sat directly against a visible divider line, so it read as an
   obvious gap. Fix: margin-bottom is 0 by default (so the collapsed state
   has a genuinely empty box, no residual) and only becomes 20px once
   .is-active — transitioned in step with the row so it doesn't pop in
   abruptly right as the grid animation finishes. */
.bep-faq-answer {
  min-height: 0;
  overflow: hidden;
  max-width: 90%;
  margin-bottom: 0;
  transition: margin-bottom 600ms ease;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  font-size: 1.25rem;
  line-height: normal;
  color: var(--bep-color-texto-suave);
}

.bep-faq-item.is-active .bep-faq-answer {
  margin-bottom: 20px;
}

.bep-faq-answer strong {
  font-weight: 600;
}

@media (max-width: 768px) {
  .bep-faq-container {
    padding-left: 0;
    padding-right: 0;
  }

  .bep-faq-question {
    font-size: 1.125rem;
  }

  .bep-faq-list {
    margin: 10px auto 0;
  }
}

/* Identical to .bep-beneficios-hangul (beneficios.css) — same asset, same
   clamp taper across the same 3 bands, same z-index:-1 (paints above this
   section's own background-color but behind normal-flow content), just
   renamed to this section. */
.bep-faq-hangul {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 30rem;
  height: auto;
  color: #cfe0ee;
  pointer-events: none;
}

@media (max-width: 1920px) {
  .bep-faq-hangul {
    width: clamp(20rem, calc(-480px + 50vw), 30rem);
  }
}

@media (max-width: 1600px) {
  .bep-faq-hangul {
    width: clamp(15rem, calc(-80px + 25vw), 20rem);
  }
}

@media (max-width: 1280px) {
  .bep-faq-hangul {
    width: clamp(7.5rem, 18.75vw, 15rem);
  }
}