/* ===========================
   02. EL PROBLEMA
   Optimizado para Chrome:
   - Hover sin mousemove ni variables dinámicas.
   - Sin blur/mix-blend-mode animado en las cards.
   - Mantiene estética oscura, brillos morados/cyan y acento naranja.
=========================== */
#problema {
  background: var(--white);
  padding: 120px 0;
}
.problema-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
@media (max-width: 900px) { .problema-grid { grid-template-columns: 1fr; } }
.problema-card {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.98) 0%, rgba(9, 12, 22, 0.98) 64%, rgba(13, 18, 31, 0.98) 100%);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 24px;
  padding: 40px 36px;
  min-height: 340px;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  contain: layout paint;
  isolation: isolate;
  box-shadow:
    0 -10px 64px rgba(78, 99, 255, 0.16),
    0 18px 42px rgba(15, 10, 31, 0.12);
  transition:
    transform 160ms var(--ease-out),
    border-color 160ms var(--ease-out);
}
.problema-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.13), transparent 25%),
    radial-gradient(ellipse at bottom right, rgba(172,92,255,0.60) -10%, rgba(79,70,229,0) 62%),
    radial-gradient(ellipse at bottom left, rgba(56,189,248,0.48) -12%, rgba(79,70,229,0) 66%),
    radial-gradient(circle at bottom center, rgba(161,58,229,0.58) -18%, rgba(79,70,229,0) 58%);
  opacity: 0.78;
  transform: translate3d(0, 0, 0) scale(1.01);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.problema-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 38%, transparent 78%, rgba(255,255,255,0.055) 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.34'/%3E%3C/svg%3E");
  opacity: 0.12;
}
.problema-card .problema-icon,
.problema-card h3,
.problema-card p {
  position: relative;
  z-index: 1;
}
.problema-card:hover {
  border-color: rgba(255,255,255,0.22);
  transform: translate3d(0, -5px, 0) scale(1.008);
}
.problema-card:hover::before {
  opacity: 0.9;
  transform: translate3d(0, 0, 0) scale(1.025);
}
.problema-icon {
  width: 54px; height: 54px;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,200,120,0.55), transparent 48%),
    linear-gradient(135deg, #ff8c2a 0%, #e05a00 100%);
  border: 1px solid rgba(255,160,60,0.45);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  color: #fff;
  box-shadow:
    0 0 18px 4px  rgba(255,107,26,0.55),
    0 0 38px 10px rgba(255,107,26,0.28),
    0 12px 28px   rgba(0,0,0,0.30),
    inset 1px 1px 4px rgba(255,220,160,0.40);
  transform: translate3d(0, 0, 0);
  transition: transform 160ms var(--ease-out);
}
.problema-card:hover .problema-icon {
  transform: translate3d(0, -2px, 0) scale(1.02);
}
.problema-card h3 {
  font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.24);
}
.problema-card p {
  margin-top: 12px;
  font-size: 15px; line-height: 1.6;
  color: rgba(235,232,245,0.72);
}
.problema-card .problema-card-glow-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.7), rgba(255,255,255,0.05));
  box-shadow:
    0 0 16px 3px rgba(172,92,255,0.72),
    0 0 28px 6px rgba(56,189,248,0.32);
  opacity: 0.86;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out);
}
.problema-card:hover .problema-card-glow-edge {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .problema-card,
  .problema-card::before,
  .problema-icon,
  .problema-card .problema-card-glow-edge {
    transition: none;
  }
  .problema-card,
  .problema-card:hover,
  .problema-card:hover .problema-icon,
  .problema-card:hover::before {
    transform: none;
  }
}