.cards-container {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
          justify-content: center;
       	  padding: 40px 0;
        }

        .card {
          background: #fff;
          border-radius: 12px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          max-width: 400px;
          flex: 1 1 300px; /* crece, encoge y ancho mínimo */
          display: flex;
          flex-direction: column;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          overflow: hidden; /* ?? evita que la imagen sobresalga del borde */
        }

        .card:hover {
          transform: translateY(-5px);
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        }

        .card img {
          width: 100%;
          height: 180px;
          object-fit: cover;
          border-top-left-radius: 12px;  /* ?? borde redondeado arriba */
          border-top-right-radius: 12px;
        }

        .card-content {
          padding: 20px;
          font-family: Arial, sans-serif;
          color: #495057;
          font-size: 14px;
          line-height: 1.5;
        }

        .card-content h4 {
          margin: 0 0 10px 0;
          font-size: 20px;
          color: #1c7ed6;
        }

        .card-footer {
          margin-top: 10px;
          font-size: 13px;
          color: #868e96;
        }