/* ==========================================================================
   Seguridad Física · IMPACTO (comparador Antes / Después)
   Usa del sitio: --cyan, .section, .container, .eyebrow, .gradient, .lead, .mini-label
   ========================================================================== */

/* Encabezado */
.impacto-heading { margin-bottom: 48px; }
.impacto-heading h2 { max-width: 820px; }
.impacto-heading h2 .gradient { display: block; }
.impacto-heading .lead { font-size: 1rem; line-height: 1.9; color: #9daec7; max-width: 720px; margin-top: 24px; }

.impacto-section { background: radial-gradient(ellipse at 70% 60%, #0a3a6a1f, transparent 65%); }
.ba-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: stretch; }

/* Comparador */
.ba {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 16 / 8.2;
  border-radius: 24px; border: 1px solid #22243a; background: #050718;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  cursor: ew-resize;
}
.ba-layer { position: absolute; inset: 0; }
.ba-after { z-index: 0; }
.ba-before { z-index: 1; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-layer img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ba-before::after, .ba-after::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.ba-before::after { background: linear-gradient(90deg, #00010ed9 0%, #00010e66 36%, transparent 62%), radial-gradient(ellipse at 50% 50%, transparent 45%, #00010e99 100%); }
.ba-after::after { background: linear-gradient(270deg, #00010ecc 0%, #00010e4d 36%, transparent 62%); }
.ba-marks, .ba-caption { z-index: 1; }

/* Textos dentro de cada lado */
.ba-caption { position: absolute; top: 30px; max-width: 250px; }
.ba-caption--before { left: 32px; }
.ba-caption--after { right: 32px; }
.ba-caption .mini-label { margin-bottom: 6px; }
.ba-caption h3 { font-size: 1.45rem; letter-spacing: -.035em; line-height: 1.25; }
.ba-caption ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ba-caption li { position: relative; padding-left: 22px; font-size: .88rem; line-height: 1.45; }
.ba-caption li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; border-radius: 50%; }
.ba-caption--before li { color: #aab2c4; }
.ba-caption--before li::before { border: 1px solid #7a8298; }
.ba-caption--after li { color: #e6f4ff; }
.ba-caption--after li::before { background: var(--cyan); box-shadow: 0 0 10px #00b0d1; }
.ba-caption--after .mini-label { color: #7fe3ff; }

/* Divisor y handle */
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3;
  width: 2px; margin-left: -1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, #00b0d1 14%, #9eeaff 50%, #00b0d1 86%, transparent);
  box-shadow: 0 0 16px #00b0d1b3;
}
.ba-handle {
  position: absolute; top: 50%; left: var(--pos); z-index: 4;
  width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  display: grid; place-items: center;
  background: #03061ab8; border: 1px solid #9eeaff80;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 6px #00b0d114, 0 0 24px -4px #00b0d1;
  cursor: grab; touch-action: none;
  transition: transform .2s, box-shadow .2s;
}
.ba-handle svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ba-handle:hover, .ba.is-dragging .ba-handle { transform: scale(1.07); box-shadow: 0 0 0 8px #00b0d11f, 0 0 30px -4px #00b0d1; }
.ba.is-dragging, .ba.is-dragging .ba-handle { cursor: grabbing; }
.ba-handle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* Beneficios */
.ba-legend { display: none; }
.ba-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ba-benefits li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 14px;
  border: 1px solid #22243a; background: #04061499;
  font-size: .85rem; line-height: 1.4; color: #d4e0ee;
}
.ba-benefits .bi {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid #1e4d66; background: #00b0d10d;
}
.ba-benefits svg { width: 20px; height: 20px; fill: none; stroke: var(--cyan); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Tablet */
@media (max-width: 1100px) {
  .ba-layout { grid-template-columns: 1fr; }
  .ba-benefits { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ba-benefits li { flex-direction: column; align-items: flex-start; }
}

/* Mobile */
@media (max-width: 700px) {
  .ba { aspect-ratio: 4 / 5; border-radius: 20px; }
  .ba .ba-caption { top: 16px; }
  .ba .ba-caption--before { left: 16px; }
  .ba .ba-caption--after { right: 16px; }
  .ba .ba-caption h3, .ba .ba-caption ul { display: none; }
  .ba .ba-caption .mini-label { margin: 0; padding: 5px 10px; border-radius: 20px; background: #00010eb3; font-size: .68rem; }
  .ba-after::after, .ba-before::after { background: linear-gradient(180deg, #00010e80 0%, transparent 30%); }
  .ba-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .ba-legend .mini-label { font-size: .68rem; line-height: 1.5; margin-bottom: 10px; }
  .ba-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .ba-legend li { position: relative; padding-left: 16px; font-size: .8rem; line-height: 1.4; }
  .ba-legend li::before { content: ""; position: absolute; left: 0; top: .4em; width: 7px; height: 7px; border-radius: 50%; }
  .ba-legend .ba-caption--before li { color: #aab2c4; }
  .ba-legend .ba-caption--before li::before { border: 1px solid #7a8298; }
  .ba-legend .ba-caption--after li { color: #e6f4ff; }
  .ba-legend .ba-caption--after li::before { background: var(--cyan); }
  .ba-legend .ba-caption--after .mini-label { color: #7fe3ff; }
  .ba-handle { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .ba-benefits { grid-template-columns: 1fr 1fr; }
  .ba-benefits li:last-child { grid-column: 1 / -1; }
}/* Preserve the site's white labels and individually colored benefit icons. */
.impacto-section{--cyan:#00B0D1}.impacto-section .mini-label{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:#fff}.ba-benefits li{--benefit:#0095E5}.ba-benefits li:nth-child(2){--benefit:#00B0D1}.ba-benefits li:nth-child(3){--benefit:#CD0298}.ba-benefits li:nth-child(4){--benefit:#FFB500}.ba-benefits li:nth-child(5){--benefit:#FF8327}.ba-benefits svg{stroke:var(--benefit)}.ba-benefits .bi{border-color:color-mix(in srgb,var(--benefit) 35%,transparent);background:color-mix(in srgb,var(--benefit) 6%,transparent)}
@media(prefers-reduced-motion:reduce){.ba-handle{transition:none}}