
    /* ---- ANIMACIÓN LIFT + SHADOW ---- */
    .card {
      transition: transform .35s ease, box-shadow .35s ease, border .35s ease;
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      backdrop-filter: blur(6px);
    }

    .card:hover {
      transform: translateY(-12px);
      box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
    }


    /* ---- GLASSMORPHISM SUAVE ---- */
    .card.glass {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* ---- ZOOM IMG ---- */
    .card-img-top {
      transition: transform .45s ease;
    }

    .card:hover .card-img-top {
      transform: scale(1.12);
    }

    /* ---- OVERLAY DEGRADADO ---- */
    .card .overlay {
      position: absolute;
      inset: 0;
      /* background: linear-gradient(
  135deg,
  rgba(200, 16, 46, 0.35),
  rgba(0, 146, 63, 0.35)); */
  background: linear-gradient(
  135deg,
  rgba(200, 16, 46, 0.35),
  rgba(225, 201, 122, 0.35),
  rgba(0, 146, 63, 0.35)


);

      opacity: 0;
      transition: opacity .4s ease;
      pointer-events: none;
    }

    .card:hover .overlay {
      opacity: 1;
    }

    /* ---- BRILLO DIAGONAL “SHINE” ---- */
    .shine {
      position: absolute;
      top: 0;
      left: -150%;
      width: 50%;
      height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
      transform: skewX(-25deg);
      transition: .6s;
    }

    .card:hover .shine {
      left: 150%;
    }

    /* ---- CARD CONTENT ---- */
    .card-body {
      position: relative;
      z-index: 2;
    }

    /* ---- BOTÓN ANIMADO ---- */
    .card-footer .btn {
      transition: transform .25s ease, background-color .25s ease;
    }

    .card:hover .btn {
      transform: translateY(3px) scale(1.02);
    }

    /* ---- APARICIÓN FADE-IN ---- */
    .fade-in {
      animation: fadeIn .8s ease forwards;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }