/* Storytelling icons for use-case steps (replaces decorative line diagrams) */

:root {
  /* Same icon language as header menu */
  --story-icon-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2385d5a1' d='M5 4h14v16H5V4zm2 2v12h10V6H7zm2 2h6v2H9V8zm0 4h6v2H9v-2z'/%3E%3C/svg%3E");
  --story-icon-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2385d5a1' d='M7 2h10a3 3 0 013 3v14a3 3 0 01-3 3H7a3 3 0 01-3-3V5a3 3 0 013-3zm0 2a1 1 0 00-1 1v14a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1H7zm2 3h6v2H9V7zm0 4h6v2H9v-2zm0 4h4v2H9v-2z'/%3E%3C/svg%3E");
  --story-icon-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2385d5a1' d='M3 4h8v8H3V4zm10 0h8v5h-8V4zM3 14h5v6H3v-6zm7 0h11v6H10v-6z'/%3E%3C/svg%3E");
  --story-icon-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2385d5a1' d='M4 4h16v4H4V4zm2 6h12v10H6V10zm2 2v6h8v-6H8z'/%3E%3C/svg%3E");
  --story-icon-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2385d5a1' d='M3 6h18v2H3V6zm2 4h14v10H5V10zm3 2v6h2v-6H8zm4 0v6h2v-6h-2z'/%3E%3C/svg%3E");
  --story-icon-6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2385d5a1' d='M3 18h18v2H3v-2zm2-5h3v5H5v-5zm5-4h3v9h-3V9zm5-3h3v12h-3V6z'/%3E%3C/svg%3E");
}

.casos-section [class$="-step-head"]::after {
  background-image: var(--story-icon, var(--story-icon-1)) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: clamp(180px, 18vw, 320px) !important;
  height: clamp(180px, 18vw, 320px) !important;
  margin-left: auto !important;
  opacity: 0.56;
  filter: drop-shadow(0 0 10px rgba(133, 213, 161, 0.14));
}

.casos-section[id$="paso-1"] [class$="-step-head"]::after { --story-icon: var(--story-icon-1); }
.casos-section[id$="paso-2"] [class$="-step-head"]::after { --story-icon: var(--story-icon-2); }
.casos-section[id$="paso-3"] [class$="-step-head"]::after { --story-icon: var(--story-icon-3); }
.casos-section[id$="paso-4"] [class$="-step-head"]::after { --story-icon: var(--story-icon-4); }
.casos-section[id$="paso-5"] [class$="-step-head"]::after { --story-icon: var(--story-icon-5); }
.casos-section[id$="paso-6"] [class$="-step-head"]::after { --story-icon: var(--story-icon-6); }

@media (max-width: 767px) {
  .casos-section [class$="-step-head"]::after {
    width: clamp(130px, 34vw, 180px) !important;
    height: clamp(130px, 34vw, 180px) !important;
    margin-left: 0 !important;
  }
}