/* Ícones 3D — Empréstimo, Cartão, Benefícios */
.icon-3d {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.icon-3d svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.icon-3d--sm { width: 52px; height: 52px; }
.icon-3d--md { width: 68px; height: 68px; }
.icon-3d--lg { width: 80px; height: 80px; }
.icon-3d--xs { width: 44px; height: 44px; }

.icon-3d-wrap {
  border-radius: 18px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
}

.icon-3d-wrap--loan {
  background: linear-gradient(145deg, #fff0f7 0%, #ffe4f0 50%, #ffc9e3 100%);
  box-shadow:
    0 10px 28px rgba(212, 20, 122, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 6px rgba(212, 20, 122, 0.08);
}

.icon-3d-wrap--card {
  background: linear-gradient(145deg, #ffe4f0 0%, #ffd6eb 50%, #ff9dcc 100%);
  box-shadow:
    0 10px 28px rgba(212, 20, 122, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 6px rgba(140, 13, 82, 0.1);
}

.icon-3d-wrap--benefit {
  background: linear-gradient(145deg, #ffd6eb 0%, #e91e8c 60%, #b01065 100%);
  box-shadow:
    0 10px 28px rgba(212, 20, 122, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 8px rgba(45, 16, 51, 0.2);
}

.icon-3d-wrap--neutral {
  background: linear-gradient(145deg, #fff5f9 0%, #ffe4f0 100%);
  box-shadow:
    0 8px 22px rgba(212, 20, 122, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.hero-card__icon.icon-3d-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin-bottom: 14px;
}

.product-card__icon.icon-3d-wrap {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  margin-bottom: 22px;
}

.benefit-item__img.icon-3d-wrap {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}

.benefits-modal-item .icon-3d-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex-shrink: 0;
}

.product-card:hover .icon-3d-wrap .icon-3d,
.hero-card:hover .icon-3d-wrap .icon-3d,
.benefit-item:hover .icon-3d-wrap .icon-3d {
  transform: translateY(-3px) scale(1.06) rotate(-2deg);
}

.product-card--card:hover .icon-3d-wrap .icon-3d {
  transform: translateY(-3px) scale(1.06) rotate(3deg);
}

.icon-3d-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, transparent 50%);
  pointer-events: none;
}