.bep-cta-final {
  width: 100%;
  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: #f1f5f8;
  text-align: center;
}

.bep-cta-final-container {
  max-width: var(--bep-container-max-width);
  margin: 0 auto;
  padding-top: var(--bep-section-padding-y);
  padding-bottom: var(--bep-section-padding-y);
  padding-right: var(--bep-container-padding);
  padding-left: var(--bep-container-padding);
}

/* Serif italic — same var(--bep-font-pt-serif) already used for
   .bep-dermociencia-card-title, the only serif/italic face registered in
   global.css. Two lines, each its own block so the split stays exactly
   where the design calls for it instead of wrapping wherever the
   viewport happens to break it. */
/* overflow: hidden is required, not decorative — .bep-cta-final-quote-line's
   resting (pre-reveal) transform includes scale(1.25) with
   transform-origin:0 0, which paints ~25% wider than the line's own box
   with nothing to clip it otherwise. Left uncontained, mobile browsers
   inflate the whole layout viewport to fit that unclipped paint (confirmed:
   window.innerWidth measured 422px instead of 375px before this fix) —
   overflow:hidden here keeps that scale contained within this element's
   real box at every point of the animation, so it never gets a chance to
   affect viewport sizing regardless of animation state. */
.bep-cta-final-quote {
  overflow: hidden;
  font-family: var(--bep-font-pt-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.3;
  color: var(--bep-color-titulo-azul);
}

/* Whole-line motion, on top of (not instead of) the per-character reveal
   below — confirmed from the reference's real CSS (global.css@xmvas.css):
   .animation--title--inactive .line slides the ENTIRE line down 120% of
   its own height and scales it up to 1.25x, animating back to
   translateY(0) scale(1) with the same curve/duration as the letters.
   transform-origin:0 0 matches the reference exactly (scales/slides from
   the line's own top-left, not its center). */
.bep-cta-final-quote-line {
  display: block;
  transform-origin: 0 0;
  transform: translateY(120%) scale(1.25);
  transition: transform 1.4s cubic-bezier(.29, .52, .5, 1);
}

.bep-cta-final.is-visible .bep-cta-final-quote-line {
  transform: translateY(0) scale(1);
}

/* Resting (pre-reveal) state for each split character — cta-final.js sets
   --char-index inline per span (0-indexed, reset every line) during the
   split. translateY is proportional to that index (not a flat offset), so
   later letters in a line start further down than earlier ones — plus a
   2deg rotation that un-rotates on reveal. Both the percentage offset and
   the rotation come straight from the reference's real
   .animation--title--inactive .char rule (global.css@xmvas.css), which our
   previous flat-12px/no-rotation version didn't replicate. delay/duration/
   easing are the same real values confirmed in that same file:
   .char { transition-delay: calc(var(--char-index) * 20ms) }, 1.4s,
   cubic-bezier(.29,.52,.5,1). inline-block so the transform actually
   applies cleanly per character instead of being subject to inline-box
   quirks. */
.bep-cta-final-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(calc(var(--char-index, 0) * 10%)) rotate(2deg);
  transition: opacity 1.4s cubic-bezier(.29, .52, .5, 1),
    transform 1.4s cubic-bezier(.29, .52, .5, 1);
  transition-delay: calc(var(--char-index, 0) * 20ms);
}

.bep-cta-final.is-visible .bep-cta-final-char {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* Starts once the quote's own reveal has fully played out: --char-total
   (set inline on .bep-cta-final by cta-final.js, inherited down to here)
   is the total character count, so this delay is the same
   "totalChars * 20ms + 1.4s" formula the reference itself uses for its
   container's own transition-duration (there, to know when the whole title
   reveal is "done"; here, to gate exactly what should happen next). */
.bep-cta-final-subtitle {
  margin-top: 24px;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(0.75rem, 1.25vw, 1rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bep-color-texto-suave);
  opacity: 0;
  transition: opacity 0.6s ease;
  transition-delay: calc(var(--char-total, 0) * 20ms + 0.5s);
}

.bep-cta-final.is-visible .bep-cta-final-subtitle {
  opacity: 1;
}

@media (max-width: 768px) {
  .bep-cta-final {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .bep-cta-final-container {
    padding-left: 0;
    padding-right: 0;
  }
}