/* A diferencia de Contexto (donde el bleed vive contra el viewport
   completo), acá toda la sección — imagen incluida — debe quedarse DENTRO
   del boxed de 1280px del sitio. .bep-diferencial en sí sólo pone el fondo
   — SIN padding vertical propio (ver por qué en el comentario de abajo) y
   sin position:relative, porque el containing block real de la imagen es
   .bep-diferencial-container, no esta sección.
   #edf1f4 — placeholder; color final pendiente de definir. */
.bep-diferencial {
  width: 100%;
  padding-right: var(--bep-container-padding);
  padding-left: var(--bep-container-padding);
  background-color: #edf1f4;
}

/* Containing block real de .bep-diferencial-image: position:relative +
   max-width:1280px, mismo patrón que .bep-beneficios-container/
   .bep-contexto-content. El padding VERTICAL (--bep-section-padding-y)
   vive ACÁ, no en .bep-diferencial — a diferencia de Contexto, donde la
   imagen es hija directa de la sección y por eso el padding de la sección
   ya formaba parte de su containing block. Acá el containing block es este
   wrapper, así que si el padding vertical se hubiera quedado en
   .bep-diferencial, el -30%/130% de la imagen habría sumado 100% de la
   altura del 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 — confirmado en vivo con Playwright, esa era exactamente la
   causa del bug. Moviendo el padding vertical acá, este wrapper pasa a
   ocupar la sección completa de borde a borde verticalmente, y el bleed
   vuelve a alcanzar el borde real de .bep-diferencial — igual que Contexto
   — sin perder el tope de ancho en 1280px (el padding horizontal no
   participa en absoluto en el cálculo de top/height, sólo el vertical).
   overflow-x:clip contiene cualquier redondeo dentro de estos 1280px — ya
   no necesita proteger todo el viewport (por eso no está en
   .bep-diferencial). */
.bep-diferencial-container {
  position: relative;
  max-width: var(--bep-container-max-width);
  margin: 0 auto;
  padding: var(--bep-section-padding-y) var(--bep-container-padding);
  overflow-x: clip;
}

/* margin-left fijo (no align-items:flex-end) para separar el bloque de
   .bep-diferencial-image en su ancho real: 550px despeja los ~515px que
   mide la imagen a 1280-1920px de viewport, con margen de sobra. A
   diferencia de flex-end, esto NO afecta la alineación interna de los
   hijos — eyebrow, título y tabla quedan alineados a la izquierda entre sí
   de forma normal (comportamiento default de bloque), compartiendo un
   mismo borde izquierdo, en vez de pegarse cada uno al borde derecho según
   su propio ancho. */
.bep-diferencial-content {
  margin-left: 550px;
}

/* Color #3875a2 hardcodeado a propósito (no var(--bep-color-titulo-azul)):
   valor específico de esta sección, pendiente de unificar en la auditoría
   final de tokens. */
.bep-diferencial-eyebrow {
  max-width: 700px;
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(0.75rem, 1.25vw, 1rem);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3875a2;
  opacity: 0;
  transform: translateY(20px);
}

.bep-diferencial-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: #3875a2;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(20px);
}

.bep-diferencial-table-wrap {
  max-width: 450px;
  margin-top: 24px;
  overflow-x: auto;
  opacity: 0;
  transform: translateY(20px);
}

/* Mismo criterio que .bep-contexto-table (contexto.css): border-collapse
   con el mismo borde en tabla + th/td para que se vea como una sola grilla
   continua, sin líneas dobles donde las celdas se tocan. */
.bep-diferencial-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid rgba(94, 122, 133, 0.35);
}

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

.bep-diferencial-table thead th {
  font-size: 0.9375rem;
  line-height: 1;
}

/* Columna Bepantol (header + celdas): fondo #e0e9ef en toda la columna,
   tipografía PT Serif Bold Italic en el header y TT Chocolates SemiBold
   (=DemiBold, font-weight:600 — no existe una variante "SemiBold" separada
   en este proyecto, ver @font-face en global.css) en el cuerpo. Color
   #3875a2 hardcodeado en toda la columna, pendiente de unificar en la
   auditoría final de tokens. */
.bep-diferencial-table thead th:first-child,
.bep-diferencial-table tbody td:first-child {
  background-color: #e0e9ef;
  color: #3875a2;
}

.bep-diferencial-table thead th:first-child {
  font-family: var(--bep-font-pt-serif);
  font-weight: 700;
  font-style: italic;
}

.bep-diferencial-table tbody td:first-child {
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 600;
  font-style: normal;
}

/* Columna "Cremas tradicionales" (header + celdas): sin fondo propio —
   se ve el fondo de la sección (#edf1f4) atrás. PT Serif Italic en el
   header, TT Chocolates Regular en el cuerpo. Color #5e7a81 hardcodeado
   (distinto de var(--bep-color-texto-suave), que es #5e7a85 — no es un
   typo, son valores intencionalmente distintos). */
.bep-diferencial-table thead th:last-child,
.bep-diferencial-table tbody td:last-child {
  background-color: transparent;
  color: #5e7a81;
}

.bep-diferencial-table thead th:last-child {
  font-family: var(--bep-font-pt-serif);
  font-weight: 400;
  font-style: italic;
}

.bep-diferencial-table tbody td:last-child {
  font-family: var(--bep-font-tt-chocolates);
  font-weight: 400;
  font-style: normal;
}

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

/* Mismo mecanismo vertical que .bep-contexto-image (top negativo + height
   compensado en vez de width, para que el bleed siempre termine al ras del
   borde inferior sin importar la altura real del contenido) — pero el
   containing block ya no es la sección completa, es .bep-diferencial-
   container (1280px, position:relative arriba). left:0 se mide contra el
   padding-box de ESE wrapper, no contra el viewport: llega exactamente al
   borde izquierdo real de los 1280px (ignora el padding-left del wrapper,
   igual que .bep-contexto-image ignora el padding de .bep-contexto), y
   nunca más allá. Resting state (opacity:0, translateX(-80px) — negativo
   porque entra desde la izquierda) para la animación de entrada en
   diferencial.js. */
.bep-diferencial-image {
  position: absolute;
  top: -10%;
  left: 0;
  display: block;
  height: 110%;
  width: auto;
  opacity: 0;
  transform: translateX(-80px);
}

@media (max-width: 1024px) {
  .bep-diferencial-content {
    margin-left: 0;
  }

  .bep-diferencial-eyebrow,
  .bep-diferencial-title,
  .bep-diferencial-table-wrap {
    max-width: 100%;
  }

  /* Mismo quiebre que .bep-contexto-image: vuelve a flujo normal, imagen
     completa arriba del texto, sin bleed ni transform. */
  .bep-diferencial-image {
    position: static;
    width: 100%;
    margin-top: var(--bep-section-padding-y);
    transform: none;
  }
}

@media (max-width: 768px) {
  .bep-diferencial-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .bep-diferencial-image {
    order: 1;
  }

  .bep-diferencial-content {
    order: 0;
  }

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