/* Antes y después (widget me_antes_despues, 2-nov): dos fotos superpuestas; el "antes" se
   recorta desde la derecha según --me-ad-pos (lo mueve assets/js/antes-despues.js). */
.me-ad {
  position: relative; margin: 0 auto; max-width: 1000px; overflow: hidden;
  border-radius: var(--me-radius-lg); background: var(--me-color-bg-alt);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .12);
  user-select: none;
}
.me-ad .me-ad__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.me-ad__antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--me-ad-pos)) 0 0); }

/* Etiquetas: el antes en blanco (arriba a la izquierda), el después en el verde del logo (derecha). */
.me-ad__etq {
  position: absolute; z-index: 2; top: 1rem; pointer-events: none;
  padding: .4rem .9rem; border-radius: 999px;
  background: var(--me-color-blanco); color: rgb(0 0 0 / .78);
  font-size: .875rem; font-weight: var(--me-fw-bold); letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
  transition: opacity var(--me-dur) var(--me-ease);
}
.me-ad__etq--antes { left: 1rem; }
.me-ad__etq--despues { right: 1rem; background: var(--me-logo-verde); }

/* Línea y tirador en el corte. */
.me-ad__linea {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--me-ad-pos); width: 3px; translate: -50% 0;
  background: var(--me-color-blanco); box-shadow: 0 0 12px rgba(0, 0, 0, .3); pointer-events: none;
}
.me-ad__tirador {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; translate: -50% -50%;
  border-radius: 50%; background: var(--me-color-blanco); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  transition: scale var(--me-dur) var(--me-ease);
}
.me-ad__tirador::before {           /* flechas ‹ › */
  content: ""; position: absolute; inset: 0; background: var(--me-color-negro);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 7.5 5 12l4.5 4.5'/%3E%3Cpath d='M14.5 7.5 19 12l-4.5 4.5'/%3E%3C/svg%3E") center / 26px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 7.5 5 12l4.5 4.5'/%3E%3Cpath d='M14.5 7.5 19 12l-4.5 4.5'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.me-ad:hover .me-ad__tirador { scale: 1.08; }
.me-ad:has(.me-ad__rango:focus-visible) .me-ad__tirador { outline: 3px solid var(--me-color-focus, var(--me-logo-celeste)); outline-offset: 3px; }

/* El control real: transparente sobre toda la foto (clic o arrastre en cualquier punto). */
.me-ad__rango {
  position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none;
}

.me-ad__leyenda { display: grid; gap: .15rem; max-width: 1000px; margin: .9rem auto 0; line-height: 1.35; }
.me-ad__leyenda-titulo { font-weight: var(--me-fw-semibold); color: var(--me-color-text); }
.me-ad__leyenda-texto { font-size: .875rem; color: var(--me-color-muted); }

@media (max-width: 600px) {
  .me-ad__etq { top: .65rem; padding: .3rem .7rem; font-size: .75rem; }
  .me-ad__etq--antes { left: .65rem; }
  .me-ad__etq--despues { right: .65rem; }
  .me-ad__tirador { width: 42px; height: 42px; }
}