.bep-dermociencia {
  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: linear-gradient(to bottom, #eef3f8 17.784%, #e6ecf1 52.7933%, #ffffff 100%);
}

.bep-dermociencia-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-dermociencia-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);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bep-color-titulo-azul);
  opacity: 0;
  transform: translateY(20px);
}

.bep-dermociencia-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);
  line-height: 1;
  color: var(--bep-color-titulo-azul);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(20px);
}

.bep-dermociencia-subtitle {
  max-width: 800px;
  margin: 20px auto 60px;
  text-align: center;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  font-size: var(--bep-font-card-text-size);
  line-height: 1;
  color: var(--bep-color-texto-suave);
  opacity: 0;
  transform: translateY(20px);
}

.bep-dermociencia-subtitle strong {
  font-weight: 400;
}

/* Reveal resting state for the grid as one block (dermociencia.js) — same
   convention as the eyebrow/title/subtitle above, applied to the group
   instead of per-card. */
.bep-dermociencia-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  opacity: 0;
  transform: translateY(20px);
}

/* Layout-only wrapper now — same role as .bep-como-actua-col (como-actua.css):
   stacks two independent sibling pieces (the image card, then the caption
   below it) with a gap between them, no shared background/border-radius of
   its own merging them into one box anymore. */
.bep-dermociencia-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Was 1/1 (matching the source assets, all 6 at 800x800px) — changed to a
   taller-than-wide 4/5 as a starting point, eyeball-tune from here. The
   underlying images are still square, so object-fit: cover on
   .bep-dermociencia-slider-before/-after (below) crops them to fill this
   new box instead of stretching. Full corner radius (not just the top) —
   this is a standalone image card, not the top half of a shape shared with
   a card-body below it. */
.bep-dermociencia-slider {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.bep-dermociencia-slider-before,
.bep-dermociencia-slider-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* "antes" is the base layer below, always fully visible. "despues" is
   clipped from the LEFT, revealing the region from this value to 100% (the
   right side). 50% is the resting default, matching dermociencia.js's
   `inset(0 0 0 ${percent}%)` at percent=50 — same formula, no mirroring. */
.bep-dermociencia-slider-after {
  clip-path: inset(0 0 0 50%);
}

/* Opacity is set inline per-frame by dermociencia.js as the drag position
   changes (fades out whichever label's side is being dragged past) — this
   transition is what keeps that stream of inline updates reading as a
   smooth fade instead of the value snapping on every pointermove. */
.bep-dermociencia-slider-label {
  position: absolute;
  top: 12px;
  z-index: 2;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bep-color-footer-texto);
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

.bep-dermociencia-slider-label-before {
  left: 12px;
}

.bep-dermociencia-slider-label-after {
  right: 12px;
}

.bep-dermociencia-slider-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 3px;
  background-color: var(--bep-color-footer-texto);
  transform: translateX(-50%);
  pointer-events: none;
}

/* CSS draws the white circle + accent border itself again (the exported SVG
   came out with an opaque white background instead of transparency). The
   <img> sits centered inside this circle and also gets its own
   border-radius: 50% — so whether the SVG's background ends up transparent
   or opaque white, it's clipped to a circle that matches the wrapper's
   white fill, and the accent border (drawn on the outer wrapper, outside
   the img's box) stays visible as a ring around it either way. */
.bep-dermociencia-slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bep-color-footer-texto);
  border: 3px solid var(--bep-color-footer-texto);
}

.bep-dermociencia-slider-handle img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* .bep-como-actua-caption (como-actua.css) defaults to opacity:0, only
   revealed via ".bep-como-actua-col:hover" — a hover trigger that only
   exists in Cómo Actúa's own markup. There's no equivalent hover ancestor
   here, so reusing the class as-is would render permanently invisible
   instead of "always visible" as needed here. This override forces it
   back on, permanently, in this section only. */
.bep-dermociencia-caption {
  flex: 1;
  padding-top: 16px;
  padding-right: 40px;
  padding-bottom: 16px;
  padding-left: 40px;
  opacity: 1;
  pointer-events: auto;
}

.bep-dermociencia-card-title {
  margin-bottom: 8px;
  font-family: var(--bep-font-pt-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--bep-font-card-title-size);
  line-height: 1;
  color: var(--bep-color-titulo-azul);
}

/* font-family/font-style already inherit from .bep-dermociencia-card-title
   with no rule needed (the browser's UA stylesheet doesn't touch those on
   <strong>) — the only thing that needs resetting is font-weight, since
   <strong> defaults to bold there, and PT Serif only has one registered
   weight (400 italic, global.css), so a requested bold would render as a
   synthetic/faux-bold instead of just falling back silently. Overriding to
   normal keeps it visually identical to the rest of the title. */
.bep-dermociencia-card-title strong {
  font-weight: normal;
}

.bep-dermociencia-card-text {
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  font-size: var(--bep-font-card-text-size);
  line-height: 1;
  color: var(--bep-color-texto-suave);
}

.bep-dermociencia-card-text strong {
  font-weight: 600;
}

/* Collapsed to 1 column rather than kept at 3: each card carries a
   meaningful chunk of description text, which would feel cramped at the
   ~220px card width 3 columns would leave at 1024px. */
@media (max-width: 1024px) {
  .bep-dermociencia-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bep-dermociencia-subtitle {
    margin: 16px auto 40px;
  }
}

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

  .bep-dermociencia-slider-handle {
    width: 34px;
    height: 34px;
  }

  .bep-dermociencia-caption {
    margin: 0;
  }
}