.bep-breaker {
  position: relative;
  overflow: hidden;

  background: linear-gradient(20.2629deg, #cfe0ee 0%, #deeaf3 53.9107%, #eef3f8 100%);
}

/* Starting point, not final — easy to tweak by eye: left-aligned (normal
   flow from the section's own padding-left, no auto margins), height
   fixed, width left to shrink-wrap around whatever that height scales the
   image's real aspect ratio to (no object-fit cropping). No padding of its
   own either — nothing to remove here, just the height being adjusted. */
.bep-breaker-media {
  width: fit-content;
  height: clamp(250px, 54.6875vw, 700px);
}

.bep-breaker-bg {
  display: block;
  width: auto;
  height: 100%;
}

/* Hangul, top-right — now an <img> (bep-hangul-piel.svg), not text.
   opacity:0 + transform:translateY(16px) are the scroll-reveal's resting
   state (breaker.js tweens these to 1 / 0 on scroll-in) — not decorative,
   removing them would kill the fade-in. pointer-events:none keeps this
   overlay from intercepting clicks, same convention used on other overlay
   content in this theme (e.g. .bep-hero-content). Kept both for that
   reason. color is inert here — the SVG has a hardcoded fill (#4280b8) and
   is loaded via <img>, so page CSS has no way to reach into it regardless;
   left declared in case a future swap uses currentColor + inline <svg>.
   Flat 30rem width plateau ≥1920px (calibrated by eye at a real 1920px
   window), tapering down through 3 media-query bands (see bottom of
   file) — same 2-point linear-interpolation technique as the old
   font-size clamp, just driving width instead, with height:auto to keep
   the SVG's own aspect ratio. Shared identically with
   .bep-beneficios-hangul. */
.bep-breaker-hangul {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 30rem;
  height: auto;
  color: #cfe0ee;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

/* "PRO VITAMINA B5" / "+ VITAMINA E", bottom-right. Reveal resting state now
   lives on each line individually (-main/-sub), not on this wrapper — they
   animate with their own stagger in breaker.js, not as one block. */
.bep-breaker-tagline {
  position: absolute;
  bottom: 60px;
  right: 60px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: right;
  pointer-events: none;
}

.bep-breaker-tagline-main {
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  line-height: 1;
  color: var(--bep-color-titulo-azul);
  opacity: 0;
  transform: translateY(20px);
}

.bep-breaker-tagline-sub {
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  line-height: 1;
  color: var(--bep-color-titulo-azul);
  opacity: 0;
  transform: translateY(20px);
}

/* .bep-breaker-hangul's mid-range taper — each band is a straight line
   between two control points, continuous with its neighbor at the shared
   boundary width: 1920px:30rem → 1600px:20rem → 1280px:15rem → clamp
   floor 7.5rem kicks in at 640px and below. Shared identically with
   .bep-beneficios-hangul. */
@media (max-width: 1920px) {
  .bep-breaker-hangul {
    width: clamp(20rem, calc(-480px + 50vw), 30rem);
  }
}

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

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

/* Mobile-only sizing pass (1024/768 didn't exist yet in this file — every
   other rule above is either desktop-only or part of the hangul's own
   1920/1600/1280 taper). Image, hangul, and tagline all get smaller here
   so none of them dominates a small screen; layout/positioning concept
   (image left, tagline bottom-right, hangul top-right) is untouched. */
@media (max-width: 1024px) {
  .bep-breaker-media {
    height: clamp(200px, 45vw, 320px);
  }

  .bep-breaker-hangul {
    width: clamp(6rem, 16vw, 9rem);
  }

  .bep-breaker-tagline {
    bottom: 32px;
    right: 24px;
  }

  .bep-breaker-tagline-main,
  .bep-breaker-tagline-sub {
    font-size: 1.75rem;
  }
}

@media (max-width: 768px) {
  .bep-breaker-media {
    height: clamp(160px, 42vw, 220px);
  }

  .bep-breaker-hangul {
    width: clamp(4.5rem, 22vw, 6rem);
  }

  .bep-breaker-tagline {
    bottom: 20px;
    right: 16px;
  }

  .bep-breaker-tagline-main,
  .bep-breaker-tagline-sub {
    font-size: 1.125rem;
  }
}