/* ==========================================================================
   Continuidad Operativa · IMPACTO — ajustes sobre /infraestructura-impacto.css
   (mismo comparador Antes / Después de las demás soluciones; no se modifica el componente)
   Azul #0095E5 / cian #00B0D1 dominantes · violeta solo como acento puntual
   ========================================================================== */
.continuity-impacto { background: #00010e; }                 /* fondo limpio, sin halos */
.continuity-impacto .impacto-heading .lead { max-width: 760px; }

/* Legibilidad del texto DESPUÉS sobre la foto del NOC (solo desktop/tablet; en móvil las listas van debajo) */
@media (min-width: 701px) {
  .continuity-impacto .ba-after::after { background: linear-gradient(270deg, #00010ef0 0%, #00010eb3 30%, #00010e33 52%, transparent 68%); }
  .continuity-impacto .ba-caption { text-shadow: 0 1px 14px #00010e; }
}

/* Beneficios: cards oscuras; un color por beneficio en el mismo orden que las demás soluciones
   (azul · cian · fucsia · amarillo · naranja) */
.continuity-impacto .ba-benefits li { --benefit: #0095e5; border-color: #0095e526; background: #030614; color: #d4e0ee; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.continuity-impacto .ba-benefits li:nth-child(2) { --benefit: #00b0d1; }
.continuity-impacto .ba-benefits li:nth-child(3) { --benefit: #cd0298; }
.continuity-impacto .ba-benefits li:nth-child(4) { --benefit: #ffb500; }
.continuity-impacto .ba-benefits li:nth-child(5) { --benefit: #ff8327; }
.continuity-impacto .ba-benefits .bi { border-color: color-mix(in srgb, var(--benefit) 35%, transparent); background: color-mix(in srgb, var(--benefit) 6%, transparent); transition: border-color .25s ease; }
.continuity-impacto .ba-benefits svg { stroke: var(--benefit); transition: filter .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .continuity-impacto .ba-benefits li:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--benefit) 55%, transparent);
    background: color-mix(in srgb, var(--benefit) 6%, #030614);
    box-shadow: 0 0 22px -10px color-mix(in srgb, var(--benefit) 50%, transparent);
  }
  .continuity-impacto .ba-benefits li:hover .bi { border-color: color-mix(in srgb, var(--benefit) 65%, transparent); }
  .continuity-impacto .ba-benefits li:hover svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--benefit) 60%, transparent)) brightness(1.2); }
}

/* Tablet: se mantienen dos columnas mientras haya espacio */
@media (min-width: 701px) and (max-width: 1100px) {
  .continuity-impacto .ba-layout { grid-template-columns: minmax(0, 1fr) 210px; }
  .continuity-impacto .ba { width: 100%; }     /* la columna de beneficios es más alta: evita que aspect-ratio ensanche el slider */
  .continuity-impacto .ba-benefits { grid-template-columns: 1fr; }
  .continuity-impacto .ba-benefits li { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; font-size: .8rem; }
  .continuity-impacto .ba-benefits .bi { width: 34px; height: 34px; }
  .continuity-impacto .ba-caption { max-width: 210px; }
  .continuity-impacto .ba-caption h3 { font-size: 1.2rem; }
  .continuity-impacto .ba-caption ul { margin-top: 14px; gap: 8px; }
}

/* Móvil: slider a todo el ancho, beneficios en columna compacta */
@media (max-width: 700px) {
  .continuity-impacto .ba-after img { object-position: 64% center; }   /* conserva la zona de monitoreo y operadores */
  .continuity-impacto .ba-before img { object-position: 46% center; }   /* operador y pantalla de alerta al centro */
  .continuity-impacto .ba-benefits { grid-template-columns: 1fr; gap: 8px; }
  .continuity-impacto .ba-benefits li:last-child { grid-column: auto; }
  .continuity-impacto .ba-benefits li { flex-direction: row; align-items: center; padding: 10px 14px; }
  .continuity-impacto .ba-benefits .bi { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .continuity-impacto .ba-benefits li, .continuity-impacto .ba-benefits .bi, .continuity-impacto .ba-benefits svg { transition: none; }
  .continuity-impacto .ba-benefits li:hover { transform: none; }
}