/* min-height + z-index support the pin/transition effect Hero → Presentación
   (js/modules/scroll-transitions.js, initSectionPin en main.js): sin
   min-height:100svh la sección no llega a cubrir el viewport completo
   mientras tapa a .bep-hero, y sin z-index no hay garantía de que quede
   por encima de .bep-hero durante el cruce (ver el z-index espejo en
   .bep-hero, hero.css). */
.bep-presentacion {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  z-index: 2;
  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: radial-gradient(circle, #eef3f8 0%, #deeaf3 15.92%, #c0d6e9 35.66%, #b1cde4 69.55%, #a1c3de 100%);
}

/* width:100% is load-bearing, not decorative: .bep-presentacion-stage below
   is width:100% too, and percentages don't contribute to an ancestor's
   intrinsic (shrink-to-fit) size — without an explicit width here this box
   collapses to 0×0 and takes .bep-presentacion-stage down with it. */
.bep-presentacion-zoom-target {
  position: relative;
  width: 100%;
}

.bep-presentacion-wordmark {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45%;
  height: auto;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

/* Fixed reference frame (1000 x 572.1875) — every child below is positioned
   via % of this box, so it scales as one proportional unit at any width.
   Kept as-is even after removing caja (which originally defined this
   bounding box) so tubo/features/lines don't need re-deriving their %.
   Deliberately NOT height:100% of .bep-presentacion (which is min-height:
   100vh for the hero pin effect) — stretching the stage to fill the
   section would blow up its aspect ratio and desync every %-based
   position inside it. Instead, .bep-presentacion centers this compact,
   fixed-ratio stage vertically (justify-content:center) so the whole
   composition sits centered in the taller section without changing its
   own internal proportions. */
.bep-presentacion-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 1000 / 572.1875;
}

/* Centered on both axes via inset:0 + margin:auto — no top/left math.
   Split into a wrapper (positioning + the constant idle float loop) and
   the <img> itself (the GSAP entrance reveal: opacity/y/scale) so the two
   animations never fight over the same element's transform — each one
   composites independently on its own box, nested transforms just stack
   visually with no conflict. */
.bep-presentacion-tubo-float {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 42%;
  height: fit-content;
  z-index: 1;
  animation: bep-presentacion-tubo-levitate 3.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.bep-presentacion-tubo {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(24px) scale(0.92);
}

@keyframes bep-presentacion-tubo-levitate {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }
}

/* Connector lines: SVGs drawn between each feature's text and the product,
   positioned as % of the stage like everything else here. Approximate
   placement — no exact coordinates yet, pending visual adjustment. Reveal
   state (opacity/translateY) mirrors .bep-presentacion-feature so each line
   fades in together with its feature group in the timeline. */
.bep-presentacion-line {
  position: absolute;
  z-index: 2;
  height: auto;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.bep-presentacion-line-tecnologia {
  top: 24%;
  left: 31%;
  width: 10%;
}

.bep-presentacion-line-textura {
  top: 29%;
  left: 60%;
  width: 12%;
}

.bep-presentacion-line-crema {
  top: 77%;
  left: 52%;
  width: 14%;
}

/* Icon + text features, distributed around the product.
   Each feature box is positioned directly via top/bottom + left/right, same
   model as tubo above. Layout is icon-on-top, text-below — uniform across
   all 3 features. Icon/text alignment (left/right, via align-items on this
   flex-column + text-align on the text below) is the one thing that
   differs per feature, matched to whichever side the text sits on: set
   below each feature's own position. */
.bep-presentacion-feature {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

/* Fixed px size, deliberately NOT a % of the feature box — the box's own
   width only controls the text's layout/wrap, it must have no bearing on
   icon size. Same value for all 3 features; only the breakpoints below may
   change it, in lockstep across all 3.
   NOTE: aspect-ratio is NOT actually a safeguard here, despite appearances —
   width and height are both explicit (non-auto), and per the CSS spec
   aspect-ratio only fills in a dimension left as auto. With both pinned, it
   is inert. If the global `img { max-width: 100% }` reset (css/base/
   global.css) ever clamps this icon's width down (whenever its feature box
   computes narrower than the icon), height stays rigid and object-fit:cover
   would crop a straight-edged slice out of the image instead of the icon
   scaling down proportionally. All 3 feature boxes are comfortably wider
   than the icon at every breakpoint today, so this isn't currently
   triggered — but if a box narrows again, the real fix is `height: auto`
   (not just adding aspect-ratio back), so aspect-ratio has an auto
   dimension to actually act on. */
.bep-presentacion-feature-icon {
  width: 150px;
  height: 150px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex-shrink: 0;
  animation: bep-presentacion-tubo-levitate 3.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.bep-presentacion-feature-text {
  flex: 1;
  width: 100%;
  font-family: var(--bep-font-body);
  font-size: var(--bep-font-card-text-size);
  line-height: 1.5rem;
  color: var(--bep-color-feature-text);
}

.bep-presentacion-feature-text strong {
  font-family: var(--bep-font-bold);
}

/* Top-left, icon + text both right-aligned. top: -5% is a manual
   fine-positioning tweak eyeballed in the browser, not a calculated value —
   don't read significance into the exact number. */
.bep-presentacion-feature-tecnologia {
  top: -5%;
  left: 8%;
  width: 22%;
  align-items: flex-end;
}

.bep-presentacion-feature-tecnologia .bep-presentacion-feature-text {
  text-align: right;
}

/* bepantol-icono-tecnologia-coreana.webp has a decorative glow baked around
   the circle in the source file — once right-aligned, that glow reads as
   unwanted air between the circle and the text next to it. Small negative
   margin nudges the icon closer to the text without touching the file. */
.bep-presentacion-feature-tecnologia .bep-presentacion-feature-icon {
  margin-right: -20px;
  margin-bottom: -20px;
}

/* Bottom-right, icon + text both left-aligned (flex-start inherited from
   the shared .bep-presentacion-feature base). */
.bep-presentacion-feature-panthenol {
  top: 54%;
  left: 67%;
  width: 22%;
}

.bep-presentacion-feature-panthenol .bep-presentacion-feature-text {
  text-align: left;
}

.bep-presentacion-feature-panthenol .bep-presentacion-feature-icon {
  margin-left: -20px;
  margin-bottom: -20px;
}

/* Top-right, icon + text both left-aligned (flex-start inherited from the
   shared .bep-presentacion-feature base). */
.bep-presentacion-feature-textura {
  top: 0%;
  left: 74%;
  width: 22%;
}

.bep-presentacion-feature-textura .bep-presentacion-feature-text {
  text-align: left;
}

.bep-presentacion-feature-textura .bep-presentacion-feature-icon {
  margin-left: -20px;
  margin-bottom: -20px;
}

/* The stage's own geometry (width: 100%, aspect-ratio locked, every child
   positioned via % of it) already scales as one proportional unit at any
   width — no explicit adjustment needed there. Only the feature text's
   font-size is a fixed rem value that doesn't shrink with the stage, so
   it's the one thing that needs an explicit reduction here. */
@media (max-width: 1024px) {
  .bep-presentacion-feature-text {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .bep-presentacion-feature-icon {
    width: 112.5px;
    height: 112.5px;
  }

  /* Same ~13.3% ratio as the desktop nudge (-20px / 150px), scaled to this
     breakpoint's icon size (112.5px) so the visual shift stays consistent
     instead of growing relatively more aggressive as the icon shrinks. */
  .bep-presentacion-feature-tecnologia .bep-presentacion-feature-icon {
    margin-right: -15px;
  }

  .bep-presentacion-feature-panthenol .bep-presentacion-feature-icon,
  .bep-presentacion-feature-textura .bep-presentacion-feature-icon {
    margin-left: -15px;
  }
}

@media (max-width: 768px) {
  .bep-presentacion-tubo-float {
    width: 48.3%;
  }

  .bep-presentacion-feature-text {
    font-size: 0.790625rem;
    line-height: 0.9375rem;
  }

  .bep-presentacion-feature-icon {
    width: 86.25px;
    height: 86.25px;
  }

  /* Same ~13.3% ratio as the desktop nudge (-20px / 150px), scaled to this
     breakpoint's icon size (75px) so the visual shift stays consistent
     instead of growing relatively more aggressive as the icon shrinks. */
  .bep-presentacion-feature-tecnologia .bep-presentacion-feature-icon {
    margin-right: -10px;
  }

  .bep-presentacion-feature-panthenol .bep-presentacion-feature-icon,
  .bep-presentacion-feature-textura .bep-presentacion-feature-icon {
    margin-left: -10px;
  }

  /* Widened from the desktop base (22% for all 3 now) so the (now full-
     width, centered-under-the-icon) text block has enough room to wrap
     comfortably at narrow mobile stage widths — text was overflowing its
     box before, which .bep-presentacion's overflow:hidden then clipped
     at the section edge. Tecnología isn't listed here — its mobile need
     (22%) is now identical to its own desktop base, so the override would
     be a no-op. */
  .bep-presentacion-feature-panthenol {
    top: 55%;
    left: 73%;
    width: 24%;
  }

  .bep-presentacion-feature-tecnologia {
    top: -13%;
    left: 8%;
  }

  /* left:74% (desktop, inherited) + width:31% used to add up to 105% —
     overflowing the stage's right edge and getting clipped by
     .bep-presentacion's overflow:hidden. Pulled left in and trimmed the
     width so it totals 95% (68+27), leaving 5% of breathing room instead
     of sitting flush against the edge. Width is still comfortably wider
     than the 22% desktop base, so the text-wrap room this override exists
     for isn't lost. */
  .bep-presentacion-feature-textura {
    top: -9%;
    left: 73%;
    width: 27%;
  }

  @keyframes bep-presentacion-tubo-levitate-mobile {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  .bep-presentacion-tubo-float {
    animation-name: bep-presentacion-tubo-levitate-mobile;
  }

  @keyframes bep-presentacion-icon-levitate-mobile {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }

  .bep-presentacion-feature-icon {
    animation-name: bep-presentacion-icon-levitate-mobile;
  }

  .bep-presentacion-line-crema {
    top: 85%;
    left: 55%;
    width: 17%;
  }

  .bep-presentacion-line-tecnologia {
    top: 24%;
    left: 31%;
    width: 10%;
  }

  .bep-presentacion-line-textura {
    top: 29%;
    left: 60%;
    width: 12%;
  }
}