/* ============================================================
   Before/After Comparator — prefijo "bac-" (a prueba de adblock)
   Variables sobrescribibles desde tu tema/Elementor
   ============================================================ */
.bac-carousel{
  --bac-wine:#7A3B47;
  --bac-ink:#262220;
  --bac-soft:#8a7d76;
  --bac-line:#E6DAD3;
  --bac-radius:14px;
  --bac-max:760px;
  --bac-tag-bg:rgba(255,255,255,.9);   /* fondo de las etiquetas Antes/Después */
  --bac-tag-txt:var(--bac-ink);        /* texto de las etiquetas */
  --bac-gap:16px;                      /* separación entre slides (perview>1) */
  --bac-perview:1;                     /* nº de slides visibles (lo fija PHP inline) */

  position:relative;
  max-width:var(--bac-max);
  margin:0 auto;
  font-family:var(--bac-font,inherit);
}

/* ---- Viewport / track ---- */
.bac-viewport{overflow:hidden;border-radius:var(--bac-radius)}
.bac-track{display:flex;gap:var(--bac-gap);transition:transform .5s cubic-bezier(.65,.05,.36,1)}
.bac-slide{
  flex:0 0 calc((100% - (var(--bac-perview) - 1) * var(--bac-gap)) / var(--bac-perview));
  min-width:0;
}

/* ---- Comparador ---- */
.bac-comparador{
  position:relative;
  overflow:hidden;
  border-radius:var(--bac-radius);
  box-shadow:0 18px 50px -22px rgba(74,45,40,.35);
  user-select:none;
  touch-action:pan-y;
  cursor:ew-resize;
  background:#efe4de;
}
/* La imagen ANTES va EN FLUJO: le da la altura al contenedor. */
.bac-before{
  position:relative;display:block;
  width:100%;height:auto;
  pointer-events:none;
}
/* La imagen DESPUÉS va encima, recortada por el slider. */
.bac-after{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
  clip-path:inset(0 0 0 var(--pos));
}

/* Etiquetas */
.bac-tag{
  position:absolute;top:16px;z-index:3;
  font-size:var(--bac-fs-tag,.68rem);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  background:var(--bac-tag-bg);color:var(--bac-tag-txt);
  padding:5px 12px;border-radius:100px;pointer-events:none;
}
.bac-tag-antes{left:16px}
.bac-tag-despues{right:16px}

/* Manija */
.bac-handle{
  position:absolute;top:0;bottom:0;left:var(--pos);z-index:4;
  width:2px;background:#fff;transform:translateX(-50%);pointer-events:none;
}
.bac-handle::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.bac-handle::before{
  content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;color:var(--bac-wine);font-size:1rem;
}

/* Input range accesible (invisible, controla la posición por teclado) */
.bac-range{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;
}
.bac-comparador:focus-within .bac-handle::after{
  outline:3px solid var(--bac-wine);outline-offset:2px;
}

/* ---- Meta debajo de cada caso ---- */
.bac-meta{text-align:center;margin-top:16px}
.bac-proc{
  display:block;font-family:inherit;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:var(--bac-fs-proc,.72rem);color:var(--bac-wine);
}
.bac-nota{display:block;color:var(--bac-soft);font-size:var(--bac-fs-nota,.9rem);margin-top:4px}

/* ---- Navegación ---- */
.bac-nav{
  position:absolute;top:calc(50% - 30px);z-index:10;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--bac-line);
  background:rgba(255,255,255,.92);color:var(--bac-ink);
  font-size:1.6rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transform:translateY(-50%);transition:.25s;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.35);
}
.bac-nav:hover{background:var(--bac-wine);color:#fff;border-color:transparent}
.bac-prev{left:-10px}
.bac-next{right:-10px}
.bac-nav[disabled]{opacity:.35;cursor:default}
.bac-nav[disabled]:hover{background:rgba(255,255,255,.92);color:var(--bac-ink)}

/* ---- Puntos ---- */
.bac-dots{display:flex;gap:9px;justify-content:center;margin-top:22px}
.bac-dots button{
  width:9px;height:9px;padding:0;border:none;border-radius:50%;
  background:var(--bac-line);cursor:pointer;transition:.25s;
}
.bac-dots button.is-active{background:var(--bac-wine);width:26px;border-radius:100px}

/* ---- Textos auxiliares ---- */
.bac-hint{text-align:center;color:var(--bac-soft);font-size:.82rem;letter-spacing:.03em;margin-top:18px}
.bac-legal{text-align:center;color:var(--bac-soft);font-size:.72rem;opacity:.8;margin-top:6px}

@media(max-width:600px){
  .bac-carousel{--bac-perview:1 !important;--bac-gap:0px}
  .bac-prev{left:6px}
  .bac-next{right:6px}
  .bac-nav{width:40px;height:40px;font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){
  .bac-track{transition:none}
}