/* ==========================================================================
   Limpia Vitoria · Casos reales (Antes / Después)
   Usa las variables de styles.css de la web (--azul-oscuro, --verde-oscuro…)
   con valores de reserva por si se usa en otra página. Prefijo lv-.
   ========================================================================== */

.lv-cases {
  --lv-navy: var(--azul-oscuro, #1A3A5C);
  --lv-green: var(--verde-oscuro, #2C7A5A);
  --lv-green-soft: var(--verde-claro, #F0F9F4);
  --lv-ink: var(--tinta, #12222F);
  --lv-text: var(--texto, #3D4E5A);
  --lv-muted: var(--gris, #6B7C87);
  --lv-line: var(--linea, #DDE7E1);
  --lv-radius: var(--r-lg, 22px);
  --lv-radius-sm: var(--r, 14px);
  --lv-shadow: var(--sombra-md, 0 10px 30px rgba(18, 34, 47, .10));
  --lv-display: var(--display, 'Montserrat', system-ui, sans-serif);
  background: var(--hueso, #FAFCFB);
}

.lv-cases *, .lv-cases *::before, .lv-cases *::after { box-sizing: border-box; }

/* ---------- Cabecera ---------- */
.lv-cases__head { max-width: 760px; margin: 0 auto 2.2rem; text-align: center; }
.lv-cases__head .lead { margin: 0 auto; }

/* ---------- Tarjeta de caso ---------- */
.lv-case {
  display: grid;
  background: #fff;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  box-shadow: var(--lv-shadow);
  overflow: hidden;
}
.lv-case__media { padding: 12px; }
.lv-case__body  { padding: 10px 22px 26px; }

.lv-case__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.lv-case__meta li {
  font-family: var(--lv-display);
  font-size: .74rem;
  font-weight: 700;
  color: var(--lv-green);
  background: var(--lv-green-soft);
  border-radius: 999px;
  padding: 5px 12px;
}
.lv-case__title {
  margin: 0 0 18px;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--lv-ink);
  text-wrap: balance;
}

/* Ficha: Problema / Solución / Resultado */
.lv-sheet { margin: 0; display: grid; gap: 16px; }
.lv-sheet__row { display: grid; grid-template-columns: 38px 1fr; gap: 2px 12px; align-items: start; }
.lv-sheet__icon {
  grid-row: span 2;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: #fff;
}
.lv-sheet__icon svg { width: 18px; height: 18px; }
.lv-sheet__row--problem  .lv-sheet__icon { background: #9a6b4f; }
.lv-sheet__row--solution .lv-sheet__icon { background: var(--lv-navy); }
.lv-sheet__row--result   .lv-sheet__icon { background: var(--lv-green); }
.lv-sheet dt {
  font-family: var(--lv-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lv-muted);
  padding-top: 2px;
}
.lv-sheet dd { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--lv-text); }

@media (min-width: 860px) {
  .lv-case { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
  .lv-case__media { padding: 14px; }
  .lv-case__body  { padding: 32px 40px 32px 22px; }
  .lv-case--wide { grid-template-columns: 1fr; }
  .lv-case--wide .lv-case__body { padding: 14px 40px 34px; }
  .lv-case--wide .lv-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
}

/* ==========================================================================
   Comparador ANTES / DESPUÉS
   ========================================================================== */
.lv-ba { margin: 0; }

.lv-ba__frame {
  --lv-pos: 50%;
  position: relative;
  aspect-ratio: var(--lv-ratio, 4 / 3);   /* reserva el hueco: sin saltos (CLS) */
  border-radius: var(--lv-radius-sm);
  overflow: hidden;
  background: #e6edf0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;                     /* scroll vertical libre; arrastre horizontal compara */
  cursor: ew-resize;
  isolation: isolate;
}

.lv-cases .lv-ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

.lv-ba__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--lv-pos)) 0 0);
  will-change: clip-path;
  z-index: 1;
}

.lv-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--lv-pos); width: 0; z-index: 3; pointer-events: none; }
.lv-ba__handle::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -1.5px;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 0 12px rgba(0, 0, 0, .25);
}
.lv-ba__knob {
  position: absolute; top: 50%; left: 0;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--lv-navy);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.lv-ba__knob svg { width: 26px; height: 26px; }
.lv-ba__frame.is-dragging .lv-ba__knob { transform: translate(-50%, -50%) scale(1.08); }
.lv-ba__range:focus-visible ~ .lv-ba__handle .lv-ba__knob { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--lv-green); }

.lv-ba__tag {
  position: absolute; top: 12px; z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--lv-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(18, 34, 47, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity .2s ease;
  pointer-events: none;
}
.lv-ba__tag--before { left: 12px; }
.lv-ba__tag--after  { right: 12px; background: rgba(44, 122, 90, .85); }
.lv-ba__frame.hide-before .lv-ba__tag--before,
.lv-ba__frame.hide-after  .lv-ba__tag--after { opacity: 0; }

.lv-ba__range {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lv-ba__caption { margin-top: 10px; font-size: .85rem; line-height: 1.45; color: var(--lv-muted); text-align: center; }
.lv-ba__hint { font-weight: 600; color: var(--lv-green); }

/* Lado a lado (fotos con encuadres distintos) */
.lv-ba--split .lv-ba__grid { display: grid; gap: 10px; }
@media (min-width: 640px) { .lv-ba--split .lv-ba__grid { grid-template-columns: 1fr 1fr; } }
.lv-ba__panel {
  position: relative;
  aspect-ratio: var(--lv-ratio, 4 / 3);
  border-radius: var(--lv-radius-sm);
  overflow: hidden;
  background: #e6edf0;
}

/* ---------- Llamada a la acción ---------- */
.lv-cta {
  margin-top: 1.6rem;
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--lv-line);
  border-left: 5px solid var(--lv-green);
  border-radius: var(--lv-radius);
}
@media (min-width: 860px) { .lv-cta { grid-template-columns: 1fr auto; padding: 26px 32px; } }
.lv-cta__title { margin: 0 0 4px; font-family: var(--lv-display); font-size: 1.2rem; font-weight: 800; color: var(--lv-ink); }
.lv-cta__text  { margin: 0; line-height: 1.55; color: var(--lv-text); }
.lv-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px) { .lv-cta__actions .btn { flex: 1 1 100%; justify-content: center; } }

@media (prefers-reduced-motion: reduce) { .lv-cases * { transition: none !important; } }