/* =========================================================
   Case card visuals — elegant CSS/SVG placeholders
   Each evokes the sector without using stock images
   ========================================================= */

/* ---------- Card 1: Visión artificial — bounding boxes on grid ---------- */
.viz-vision {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 40%, rgba(111,232,201,0.18), transparent 55%),
              linear-gradient(135deg, #0f1a18 0%, #0a0a0a 60%);
  overflow: hidden;
}
.viz-vision::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(111,232,201,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,232,201,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 60% 45%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 45%, black 30%, transparent 75%);
}
.viz-vision svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Card 2: Retail — aerial grid of stores ---------- */
.viz-retail {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, #0d1416 0%, #0a0a0a 75%);
  overflow: hidden;
}
.viz-retail::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.04) 0,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 34px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.04) 0,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 34px);
  transform: perspective(500px) rotateX(55deg) scale(1.6);
  transform-origin: center 80%;
  mask-image: radial-gradient(ellipse at 50% 55%, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, black 30%, transparent 70%);
}
.viz-retail svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Card 3: Agroindustria — coffee bean clusters ---------- */
.viz-agro {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 40% 60%, #1a1310 0%, #0a0a0a 75%);
  overflow: hidden;
}
.viz-agro svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Consult banner visual ---------- */
.viz-consult {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.viz-consult::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(111,232,201,0.14) 1px, transparent 1.5px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 70% 50%, black 20%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, black 20%, transparent 60%);
  opacity: 0.6;
}