/* Boxed section — .bep-contexto itself only sets horizontal padding
   (matches .bep-diferencial's own scheme in diferencial.css). The vertical
   padding lives on .bep-contexto-content instead (see comment there):
   .bep-contexto-image is now a child of .bep-contexto-content, so THAT
   wrapper is its real containing block, and top:-30%/height:130% below
   need that wrapper's height to span the section edge-to-edge, not just
   the section's horizontal inset.
   overflow-x:clip contains .bep-contexto-image's resting transform
   (translateX(80px), see below) at its actual source — same pattern as
   .bep-cta-final-quote and .bep-disponible-en-marquee. clip rather than
   hidden so it doesn't force overflow-y to compute as auto, which would
   clip this section's own intentional vertical bleed (top:-30%/height:130%
   below, overlapping Beneficios above) — confirmed live with Playwright.
   This is a second, local layer on top of the sitewide overflow-x:clip on
   html/body (global.css), not a replacement for it. */
.bep-contexto {
  position: relative;
  width: 100%;
  overflow-x: clip;
  padding-right: var(--bep-container-padding);
  padding-left: var(--bep-container-padding);
  background-color: #e4edf3;
}

/* Containing block real de .bep-contexto-image: position:relative +
   max-width:1280px, mismo patrón que .bep-diferencial-container. El padding
   VERTICAL (--bep-section-padding-y) vive ACÁ, no en .bep-contexto — si se
   hubiera quedado en la sección, el -30%/130% de la imagen habría sumado
   100% de la altura de ESTE wrapper (sólo el contenido de texto, sin ese
   padding), dejando una brecha de --bep-section-padding-y antes del borde
   real de la sección (mismo bug ya confirmado en vivo con Playwright y
   documentado en diferencial.css). Moviendo el padding vertical acá, este
   wrapper vuelve a ocupar la sección completa de borde a borde
   verticalmente, y el bleed alcanza el borde real de .bep-contexto sin
   perder el tope de ancho en 1280px. */
.bep-contexto-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--bep-container-max-width);
  margin: 0 auto;
  padding: var(--bep-section-padding-y) var(--bep-container-padding);
}

/* Reveal resting state for the 5 text blocks staggered in by contexto.js
   (initContexto) — same opacity:0 + translateY convention used everywhere
   else in the theme (e.g. .bep-como-actua-grid, como-actua.css), just
   applied per-block here instead of to one shared wrapper, so each one can
   animate in on its own beat instead of all moving together. */
.bep-contexto-eyebrow {
  max-width: 700px;
  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-contexto-title {
  max-width: 700px;
  margin-top: 12px;
  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-contexto-text {
  max-width: 700px;
  margin-top: 10px;
  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-contexto-table-wrap {
  max-width: 700px;
  margin-top: 20px;
  overflow-x: auto;
  opacity: 0;
  transform: translateY(20px);
}

/* border-collapse: collapse + a matching border on both the table itself
   and every th/td merges into one continuous grid — outer outline plus
   full internal cell borders, all 1px, no double-thickness lines where
   cells touch (the width the rest of this table's borders already used,
   e.g. the old tbody td border-bottom). Color is the same #5e7a85 used
   elsewhere in this section, just at low opacity (same rgba-over-hex
   technique the old tbody border-bottom used) so the grid reads as
   subtle/soft instead of a hard outline. */
.bep-contexto-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(94, 122, 133, 0.35);
}

.bep-contexto-table th,
.bep-contexto-table td {
  padding: 12px 16px;
  border: 1px solid rgba(94, 122, 133, 0.35);
  text-align: left;
  white-space: nowrap;
}

.bep-contexto-table thead th {
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1;
  color: #e4edf3;
}

.bep-contexto-table thead th:first-child {
  background-color: var(--bep-color-texto-suave);
}

.bep-contexto-table thead th:last-child {
  background-color: var(--bep-color-titulo-azul);
}

.bep-contexto-table tbody td {
  font-size: 0.9375rem;
  line-height: 1;
}

/* Left column: what the skin faces (plain). Right column: what Korean
   dermoscience offers (the "answer" side) — set apart with a heavier weight
   and the same accent blue as the eyebrow/title. */
.bep-contexto-table tbody td:first-child {
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  color: var(--bep-color-texto-suave);
}

.bep-contexto-table tbody td:last-child {
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 500;
  font-style: normal;
  color: var(--bep-color-titulo-azul);
}

.bep-contexto-stat {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 480px;
  margin-top: 20px;
  opacity: 0;
  transform: translateY(20px);
}

/* "4/5" is a pre-built SVG (bep-contexto-fraccion-45.svg) — the fraction
   layout, PT Serif Italic, and color (#5e7a85) are already baked into the
   file itself, so this rule only controls how it sits in the layout, not
   how it looks. height is the controlled dimension with width: auto
   preserving the SVG's own aspect ratio — same "one dimension controlled"
   pattern used elsewhere in this section. */
.bep-contexto-stat-fraction {
  display: block;
  flex-shrink: 0;
  height: 3.5rem;
  width: auto;
}

.bep-contexto-stat-text {
  font-family: var(--bep-font-tt-chocolates);
  font-style: italic;
  font-size: 1rem;
  line-height: 1;
  color: var(--bep-color-texto-suave);
}

/* The one deliberate break from the section's boxing above: position:
   absolute takes it out of the grid/padding flow, and its containing block
   becomes .bep-contexto's PADDING box (the nearest positioned ancestor) —
   per spec, top/right/bottom/left on an absolutely positioned element are
   measured from the outer edge of that padding box, i.e. offsets of 0 land
   flush with the section's true edge, ignoring the section's own padding
   entirely. That's what "right: 0" is doing here: it reaches the section's
   real right edge — which, since .bep-contexto spans the full viewport
   width, is also the real viewport edge — without touching padding-right
   on .bep-contexto itself. top is negative for the same reason: 0 would
   already sit at the section's true top edge (ignoring padding-top), so a
   negative value pushes it further up, overlapping Beneficios above.
   Both top and height are now % (not px): for an absolutely positioned
   element, percentage top/height resolve against the containing block's
   actual used height — .bep-contexto's real rendered height, even though
   that height itself is 'auto' (content-driven). This works reliably
   despite the parent having no explicit height because the CSS2.1 spec's
   "percentage height needs an explicit parent height, else treat as auto"
   rule (§10.5) explicitly excludes absolutely positioned elements from that
   fallback — abspos elements are out of normal flow, so there's no
   circular dependency between their height and the parent's, and browsers
   resolve the percentage against the parent's final computed height with
   no special-casing needed here.
   Height (not width) is the controlled dimension — top: -30% pushes the
   image up by 30% of the section's height, and height: 130% compensates by
   that same 30%, so the bottom edge always lands exactly at the section's
   own bottom edge (-30% top + 130% height = 100% = flush with the section
   bottom), regardless of how tall the section ends up being. Width: auto
   lets the browser derive the width from that controlled height and the
   image's own real intrinsic aspect ratio — same "one dimension controlled,
   the other auto" technique as .bep-breaker-bg (breaker.css), just
   controlling height here instead of width. No aspect-ratio property
   needed: that's for pinning a ratio independent of the element's own
   intrinsic size (e.g. cropping via object-fit); a plain <img> with one
   dimension set already preserves its real intrinsic ratio on the other,
   and hardcoding one here would just be a second, driftable copy of a
   number the browser already reads from the file itself. */
.bep-contexto-image {
  position: absolute;
  top: -20%;
  right: 0;
  display: block;
  height: 120%;
  width: auto;
  opacity: 0;
  transform: translateX(80px);
}

@media (max-width: 1024px) {
  .bep-contexto-title,
  .bep-contexto-text,
  .bep-contexto-table-wrap,
  .bep-contexto-stat {
    max-width: 100%;
  }

  /* Stacked to 1 column: the image sits below the text now instead of
     bleeding off the right edge, so both the absolute positioning and the
     overlap-the-previous-section trick stop making sense here — back to a
     normal in-flow, full-width, boxed image (respecting the section's own
     padding like everything else at this breakpoint). */
  .bep-contexto-image {
    position: static;
    width: 100%;
    margin-top: var(--bep-section-padding-y);
    transform: none;
  }
}

@media (max-width: 768px) {
  .bep-contexto-stat {
    gap: 16px;
  }

  .bep-contexto-stat-fraction {
    height: 2rem;
  }

  .bep-contexto-image {
    order: 1;
    margin-top: 0;
  }

  .bep-contexto-content {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .bep-contexto-eyebrow,
  .bep-contexto-title,
  .bep-contexto-text {
    text-align: center;
  }

  .bep-contexto-table th,
  .bep-contexto-table td {
    white-space: normal;
  }

  .bep-contexto-table {
    table-layout: fixed;
    width: 100%;
  }
}